Maison interface Web js tutoriel Exemple détaillé d'implémentation jQuery d'ajout et de suppression de fonctions de la table d'informations utilisateur

Exemple détaillé d'implémentation jQuery d'ajout et de suppression de fonctions de la table d'informations utilisateur

Dec 29, 2017 am 09:32 AM
jquery 实现 用户

Cet article présente principalement jQuery pour implémenter les fonctions d'ajout et de suppression des tableaux d'informations utilisateur. Le code est simple et facile à comprendre, très bon et a une valeur de référence. J'espère qu'il pourra s'y référer. aider tout le monde.

1. Interface du navigateur

Exemple détaillé dimplémentation jQuery dajout et de suppression de fonctions de la table dinformations utilisateur

Une simple opération d'information utilisateur

2. 🎜>


<body>
  <form name="userForm">
    <center>
      用户录入
      <br />
      用户名:
      <input id="username" name="username" type="text" size=15 />
      E-mail:
      <input id="email" name="email" type="text" size=15 />
      电话:
      <input id="tel" name="tel" type="text" size=15 />
      <input type="button" value="添加" id="btn_submit" />
      <input type="button" value="删除所有" id="btn_removeAll" />
    </center>
  </form>
  ----------------------------
  <hr />
  <table border="1" align="center" cellpadding=0 cellspacing=0 width=400>
    <thead>
      <tr>
        <th>用户名</th>
        <th>E-mail</th>
        <th>电话</th>
        <th>操作</th>
      </tr>
    </thead>
    ----------------------------
    <tbody id="userTbody">
      <tr>
        <td>乔峰</td>
        <td>qiao@163.com</td>
        <td>18212345678</td>
        <td>
          <a href=&#39;#&#39; class=&#39;myClz&#39;>删除</a>
        </td>
      </tr>
    </tbody>
    ----------------------------
  </table>
</body>
Copier après la connexion

3 Implémentation de jQuery


$(function () {
  $("#btn_submit").click(function () {
    // 获取用户输入的值
    var usernameVal = $("#username").val();
    var emailVal = $("#email").val();
    var telVal = $("#tel").val();
    var tr = "<tr><td>" + usernameVal + "</td><td>" + emailVal
      + "</td><td>" + telVal
      + "</td><td><a href=&#39;#&#39; class=&#39;myClz&#39;>删除</a></td></tr>";
    $("#userTbody").append(tr);
  });
  // 全部删除
  $("#btn_removeAll").click(function () {
    $("#userTbody").empty();
  });
  //删除一行数据
  /*click只对本身页面有的元素有作用,对于后面新加的元素,不起作用
     $(".myClz").click(function() {
       console.log(123);
     });
   */
  /*选择id=userTbody元素下所有样式名含有myClz的标签,并添加click事件
   *当点击后,向上一级找到tr元素,然后删除
  */
  $(&#39;#userTbody&#39;).on(&#39;click&#39;, ".myClz", function () {
    $(this).closest(&#39;tr&#39;).remove();
  });
});
Copier après la connexion
Recommandations associées :

Schéma de répartition horizontale pour le tableau d'informations utilisateur

Mise en œuvre de la fonction d'affichage du tableau d'informations sur les employés

jsp Le La page affiche le tableau d'informations sur les données de la base de données

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser le compte Xiaohongshu pour trouver des utilisateurs ? Puis-je retrouver mon numéro de téléphone portable ? Comment utiliser le compte Xiaohongshu pour trouver des utilisateurs ? Puis-je retrouver mon numéro de téléphone portable ? Mar 22, 2024 am 08:40 AM

Avec le développement rapide des médias sociaux, Xiaohongshu est devenue l'une des plateformes sociales les plus populaires. Les utilisateurs peuvent créer un compte Xiaohongshu pour montrer leur identité personnelle et communiquer et interagir avec d'autres utilisateurs. Si vous avez besoin de trouver le numéro Xiaohongshu d’un utilisateur, vous pouvez suivre ces étapes simples. 1. Comment utiliser le compte Xiaohongshu pour trouver des utilisateurs ? 1. Ouvrez l'application Xiaohongshu, cliquez sur le bouton « Découvrir » dans le coin inférieur droit, puis sélectionnez l'option « Notes ». 2. Dans la liste des notes, recherchez la note publiée par l'utilisateur que vous souhaitez rechercher. Cliquez pour accéder à la page de détails de la note. 3. Sur la page de détails de la note, cliquez sur le bouton « Suivre » sous l'avatar de l'utilisateur pour accéder à la page d'accueil personnelle de l'utilisateur. 4. Dans le coin supérieur droit de la page d'accueil personnelle de l'utilisateur, cliquez sur le bouton à trois points et sélectionnez « Informations personnelles »

Connectez-vous à Ubuntu en tant que superutilisateur Connectez-vous à Ubuntu en tant que superutilisateur Mar 20, 2024 am 10:55 AM

Dans les systèmes Ubuntu, l'utilisateur root est généralement désactivé. Pour activer l'utilisateur root, vous pouvez utiliser la commande passwd pour définir un mot de passe, puis utiliser la commande su- pour vous connecter en tant que root. L'utilisateur root est un utilisateur disposant de droits d'administration système illimités. Il dispose des autorisations nécessaires pour accéder et modifier les fichiers, la gestion des utilisateurs, l'installation et la suppression de logiciels et les modifications de la configuration du système. Il existe des différences évidentes entre l'utilisateur root et les utilisateurs ordinaires. L'utilisateur root possède la plus haute autorité et des droits de contrôle plus étendus sur le système. L'utilisateur root peut exécuter des commandes système importantes et modifier des fichiers système, ce que les utilisateurs ordinaires ne peuvent pas faire. Dans ce guide, j'explorerai l'utilisateur root Ubuntu, comment se connecter en tant que root et en quoi il diffère d'un utilisateur normal. Avis

Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Mar 24, 2024 am 11:27 AM

Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Avec l’essor des réseaux sociaux, WeChat est devenu l’un des outils de communication indispensables dans la vie quotidienne des gens. Cependant, de nombreuses personnes peuvent rencontrer un problème : se connecter à plusieurs comptes WeChat en même temps sur le même téléphone mobile. Pour les utilisateurs de téléphones mobiles Huawei, il n'est pas difficile d'obtenir une double connexion WeChat. Cet article explique comment obtenir une double connexion WeChat sur les téléphones mobiles Huawei. Tout d'abord, le système EMUI fourni avec les téléphones mobiles Huawei offre une fonction très pratique : l'ouverture d'une double application. Grâce à la fonction de double ouverture de l'application, les utilisateurs peuvent simultanément

Guide de programmation PHP : méthodes pour implémenter la séquence de Fibonacci Guide de programmation PHP : méthodes pour implémenter la séquence de Fibonacci Mar 20, 2024 pm 04:54 PM

Le langage de programmation PHP est un outil puissant pour le développement Web, capable de prendre en charge une variété de logiques et d'algorithmes de programmation différents. Parmi eux, l’implémentation de la séquence de Fibonacci est un problème de programmation courant et classique. Dans cet article, nous présenterons comment utiliser le langage de programmation PHP pour implémenter la séquence de Fibonacci et joindrons des exemples de code spécifiques. La suite de Fibonacci est une suite mathématique définie comme suit : le premier et le deuxième élément de la suite valent 1, et à partir du troisième élément, la valeur de chaque élément est égale à la somme des deux éléments précédents. Les premiers éléments de la séquence

Comment implémenter la fonction de clonage WeChat sur les téléphones mobiles Huawei Comment implémenter la fonction de clonage WeChat sur les téléphones mobiles Huawei Mar 24, 2024 pm 06:03 PM

Comment mettre en œuvre la fonction de clonage WeChat sur les téléphones mobiles Huawei Avec la popularité des logiciels sociaux et l'importance croissante accordée à la confidentialité et à la sécurité, la fonction de clonage WeChat est progressivement devenue le centre d'attention. La fonction de clonage WeChat peut aider les utilisateurs à se connecter simultanément à plusieurs comptes WeChat sur le même téléphone mobile, ce qui facilite la gestion et l'utilisation. Il n'est pas difficile de mettre en œuvre la fonction de clonage WeChat sur les téléphones mobiles Huawei. Il vous suffit de suivre les étapes suivantes. Étape 1 : Assurez-vous que la version du système de téléphonie mobile et la version de WeChat répondent aux exigences. Tout d'abord, assurez-vous que la version de votre système de téléphonie mobile Huawei a été mise à jour vers la dernière version, ainsi que l'application WeChat.

Analyse du mécanisme de stockage des mots de passe utilisateur dans le système Linux Analyse du mécanisme de stockage des mots de passe utilisateur dans le système Linux Mar 20, 2024 pm 04:27 PM

Analyse du mécanisme de stockage du mot de passe utilisateur dans le système Linux Dans le système Linux, le stockage du mot de passe utilisateur est l'un des mécanismes de sécurité très importants. Cet article analysera le mécanisme de stockage des mots de passe des utilisateurs dans les systèmes Linux, y compris le stockage crypté des mots de passe, le processus de vérification des mots de passe et la manière de gérer en toute sécurité les mots de passe des utilisateurs. Dans le même temps, des exemples de code spécifiques seront utilisés pour démontrer le processus opérationnel réel de stockage des mots de passe. 1. Stockage crypté des mots de passe Dans les systèmes Linux, les mots de passe des utilisateurs ne sont pas stockés dans le système en texte brut, mais sont cryptés et stockés. L

Base de données Oracle : un utilisateur peut-il disposer de plusieurs espaces de table ? Base de données Oracle : un utilisateur peut-il disposer de plusieurs espaces de table ? Mar 03, 2024 am 09:24 AM

La base de données Oracle est un système de gestion de base de données relationnelle couramment utilisé et de nombreux utilisateurs rencontreront des problèmes lors de l'utilisation des espaces table. Dans la base de données Oracle, un utilisateur peut disposer de plusieurs espaces table, ce qui permet de mieux gérer le stockage et l'organisation des données. Cet article explique comment un utilisateur peut disposer de plusieurs espaces table dans une base de données Oracle et fournit des exemples de code spécifiques. Dans la base de données Oracle, l'espace table est une structure logique utilisée pour stocker des objets tels que des tables, des index et des vues. Chaque base de données possède au moins un tablespace,

Guide de mise en œuvre des exigences du jeu PHP Guide de mise en œuvre des exigences du jeu PHP Mar 11, 2024 am 08:45 AM

Guide d'implémentation des exigences du jeu PHP Avec la popularité et le développement d'Internet, le marché des jeux Web devient de plus en plus populaire. De nombreux développeurs espèrent utiliser le langage PHP pour développer leurs propres jeux Web, et la mise en œuvre des exigences du jeu constitue une étape clé. Cet article explique comment utiliser le langage PHP pour implémenter les exigences courantes du jeu et fournit des exemples de code spécifiques. 1. Créer des personnages de jeu Dans les jeux Web, les personnages de jeu sont un élément très important. Nous devons définir les attributs du personnage du jeu, tels que le nom, le niveau, la valeur de l'expérience, etc., et fournir des méthodes pour les exploiter.

See all articles