Ajouter et supprimer la fonction de requête dans la table jquery

Avec le développement continu de la technologie Internet, l'importance des applications Web augmente de jour en jour. Le tableau est un outil d'affichage d'informations important et est couramment utilisé dans divers systèmes de gestion. Dans notre programme, nous avons besoin d'un tableau pour afficher les données, et nous avons également besoin d'un outil pratique pour ajouter, supprimer, modifier et vérifier le tableau, ce qui peut grandement améliorer notre efficacité de travail. Cet article expliquera comment utiliser jQuery pour implémenter les fonctions d'ajout, de suppression, de modification et de requête de tables.

Tout d'abord, vous avez besoin d'un tableau HTML. Un tableau simple peut être créé à l'aide du code HTML suivant.

<table id="table-data">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
      <td><button class="delete">删除</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
      <td><button class="delete">删除</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
      <td><button class="delete">删除</button></td>
    </tr>
  </tbody>
</table>

Ensuite, nous devons ajouter une dépendance jQuery.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Ensuite, nous pouvons commencer à implémenter les fonctions d'ajout, de suppression, de modification et de vérification.

Fonction ajoutée

Afin d'implémenter la fonction ajoutée du formulaire, nous avons besoin d'un formulaire pour permettre aux utilisateurs de saisir des données. Le formulaire peut être créé à l'aide du code HTML suivant.

<form id="form-data">
  <div>
    <label for="name">姓名：</label>
    <input type="text" id="name" required>
  </div>
  <div>
    <label for="age">年龄：</label>
    <input type="number" id="age" required>
  </div>
  <button type="submit">添加</button>
</form>

Ensuite, ajoutez le code suivant dans jQuery.

$("#form-data").submit(function(e) {
  e.preventDefault();
  let name = $("#name").val();
  let age = $("#age").val();
  let newId = $("#table-data tbody tr:last-child td:first-child").text() + 1;
  let row = `<tr>
              <td>${newId}</td>
              <td>${name}</td>
              <td>${age}</td>
              <td><button class="delete">删除</button></td>
            </tr>`;
  $("#table-data tbody").append(row);
  $("#form-data")[0].reset();
});

Tout d'abord, nous utilisons e.preventDefault() pour interdire le comportement de soumission par défaut du navigateur. Nous obtenons ensuite le nom et l'âge du formulaire et générons un nouveau numéro basé sur le numéro de la dernière ligne. Nous utilisons ensuite JQuery pour ajouter dynamiquement une nouvelle ligne et l'ajouter à la fin du tableau. Enfin, nous appelons la méthode reset() pour réinitialiser la valeur du champ du formulaire à vide. e.preventDefault()禁止浏览器的默认提交行为。然后，我们从表单中获取姓名和年龄，并根据最后一行的编号生成新的编号。然后，我们使用JQuery动态添加一个新的行，并将其附加到表格的末尾。最后，我们调用reset()方法将表单字段的值重置为空。

现在，我们就成功了添加行的功能。

删除功能

下面我们来实现删除行的功能。我们可以在表格的HTML代码中添加一个删除按钮，如下所示：

<td><button class="delete">删除</button></td>

然后，我们可以使用以下jQuery代码来实现删除数据行的功能。

$("tbody").on("click", ".delete", function() {
  if (confirm("确定删除这行数据吗？")) {
    $(this).closest("tr").remove();
  }
});

首先，我们使用.on()事件监听器来监听.delete按钮的点击事件，并使用closest()方法获取其最近的祖先元素，即表格行，并使用remove()方法将其删除。在此之前，我们使用confirm()方法向用户确认是否确实要删除这一行数据，从而避免用户误删数据。

修改功能

下面我们来实现修改行数据的功能。同样地，我们添加一个“编辑”按钮到表格的每行中。

<td><button class="edit">编辑</button></td>

然后，我们需要为编辑按钮添加点击事件监听器，并在其中创建一个表单，将原始数据填入表单中，如下所示。

$("tbody").on("click", ".edit", function() {
  let id = $(this).closest("tr").find("td:first-child").text();
  let name = $(this).closest("tr").find("td:nth-child(2)").text();
  let age = $(this).closest("tr").find("td:nth-child(3)").text();
  let form = `
    <form id="form-edit">
      <div>
        <label for="edit-name">姓名：</label>
        <input type="text" id="edit-name" value="${name}" required>
      </div>
      <div>
        <label for="edit-age">年龄：</label>
        <input type="number" id="edit-age" value="${age}" required>
      </div>
      <button type="submit">保存</button>
    </form>`;
  $(this).closest("tr").html(`
    <td>${id}</td>
    <td>${form}</td>
    <td></td>
    <td></td>
  `);
});

首先，我们使用closest()方法获取当前编辑按钮的祖先元素，即表格行，并使用find()方法通过选择器获取该行的第一个单元格（即ID）、第二个单元格（即姓名）和第三个单元格（即年龄）中的数据，然后将其存储到变量中。

接着，我们创建一个新的表单，并使用变量中的数据填充该表单中的字段。最后，我们使用html()方法将表格行的内容替换为表单的HTML代码。

对于保存操作，我们可以使用以下jQuery代码来实现。

$("tbody").on("submit", "#form-edit", function(e) {
  e.preventDefault();
  let name = $("#edit-name").val();
  let age = $("#edit-age").val();
  let id = $(this).closest("tr").find("td:first-child").text();
  $(this).closest("tr").html(`
    <td>${id}</td>
    <td>${name}</td>
    <td>${age}</td>
    <td>
      <button class="delete">删除</button>
      <button class="edit">编辑</button>
    </td>
  `);
});

首先，我们使用closest()方法获取当前表单的祖先元素，即表格行，并使用find()方法获取该行的ID。然后，我们使用html()方法将表单的数据更新到表格行中，并使用“删除”和“编辑”按钮重新添加到该行中。最后，我们可以使用reset()方法将表单的字段重置为空。

查询功能

最后，我们来实现一个简单的查询功能。我们可以在页面上添加一个文本输入框，并借助jQuery过滤表格数据。我们可以使用以下HTML代码来创建查询栏。

<form id="form-search">
  <input type="text" id="search-keyword" placeholder="请输入姓名搜索" required>
  <button type="submit">查询</button>
</form>

然后，我们可以使用以下jQuery代码来实现查询功能。

$("#form-search").submit(function(e) {
  e.preventDefault();
  let keyword = $("#search-keyword").val();
  $("tbody tr").hide();
  $("tbody tr:contains('" + keyword + "')").show();
});

首先，我们使用.submit()方法为表单添加提交事件监听器，并使用e.preventDefault()禁止默认行为。然后，我们从查询栏中获取关键字，并使用hide()方法将表格的所有行都隐藏起来。最后，我们使用:contains()选择器，根据关键字过滤需要显示的行，并使用show()

Maintenant, nous avons ajouté avec succès la fonction de ligne.

Fonction de suppression#🎜🎜##🎜🎜# Implémentons la fonction de suppression de lignes. Nous pouvons ajouter un bouton de suppression dans le code HTML du tableau, comme indiqué ci-dessous : #🎜🎜#rrreee#🎜🎜# Ensuite, nous pouvons utiliser le code jQuery suivant pour implémenter la fonction de suppression de lignes de données. #🎜🎜#rrreee#🎜🎜#Tout d'abord, nous utilisons l'écouteur d'événement .on() pour écouter l'événement click du bouton .delete, et utilisons le closest() récupère son élément ancêtre le plus proche, la ligne du tableau, et la supprime à l'aide de la méthode remove(). Avant cela, nous utilisons la méthode confirm() pour confirmer à l'utilisateur s'il souhaite réellement supprimer cette ligne de données, afin d'éviter que l'utilisateur ne supprime accidentellement les données. #🎜🎜##🎜🎜#Fonction de modification#🎜🎜##🎜🎜# Implémentons la fonction de modification des données de ligne. De même, nous ajoutons un bouton « Modifier » à chaque ligne du tableau. #🎜🎜#rrreee#🎜🎜#Ensuite, nous devons ajouter un écouteur d'événement de clic pour le bouton d'édition et y créer un formulaire pour remplir le formulaire avec les données brutes comme indiqué ci-dessous. #🎜🎜#rrreee#🎜🎜#Tout d'abord, nous utilisons la méthode closest() pour obtenir l'élément ancêtre du bouton d'édition actuel, c'est-à-dire la ligne du tableau, et utilisons la fonction find () méthode à transmettre Le sélecteur prend les données de la première cellule (c'est-à-dire l'ID), de la deuxième cellule (c'est-à-dire le nom) et de la troisième cellule (c'est-à-dire l'âge) de la ligne et les stocke dans des variables. #🎜🎜##🎜🎜#Ensuite, nous créons un nouveau formulaire et remplissons les champs du formulaire avec les données des variables. Enfin, nous utilisons la méthode html() pour remplacer le contenu des lignes du tableau par le code HTML du formulaire. #🎜🎜##🎜🎜#Pour l'opération de sauvegarde, nous pouvons utiliser le code jQuery suivant pour y parvenir. #🎜🎜#rrreee#🎜🎜#Tout d'abord, nous utilisons la méthode closest() pour obtenir l'élément ancêtre du formulaire actuel, c'est-à-dire la ligne du tableau, et utilisons la méthode find( ) pour obtenir l'ID de la ligne. Nous utilisons ensuite la méthode html() pour mettre à jour les données du formulaire dans la ligne du tableau et les rajouter à la ligne à l'aide des boutons Supprimer et Modifier. Enfin, nous pouvons utiliser la méthode reset() pour réinitialiser les champs du formulaire à vides. #🎜🎜##🎜🎜#Fonction de requête#🎜🎜##🎜🎜#Enfin, implémentons une fonction de requête simple. Nous pouvons ajouter une zone de saisie de texte à la page et filtrer les données du tableau à l'aide de jQuery. Nous pouvons utiliser le code HTML suivant pour créer la barre de requête. #🎜🎜#rrreee#🎜🎜# Ensuite, nous pouvons utiliser le code jQuery suivant pour implémenter la fonction de requête. #🎜🎜#rrreee#🎜🎜#Tout d'abord, nous utilisons la méthode .submit() pour ajouter un écouteur d'événement de soumission au formulaire, et utilisons e.preventDefault() pour supprimer le comportement par défaut. Ensuite, nous récupérons les mots-clés de la colonne de requête et utilisons la méthode hide() pour masquer toutes les lignes du tableau. Enfin, nous utilisons le sélecteur :contains() pour filtrer les lignes qui doivent être affichées en fonction de mots-clés, et utilisons la méthode show() pour afficher ces lignes. #🎜🎜##🎜🎜#À ce stade, nous avons implémenté une fonction de base d'ajout, de suppression, de modification et de requête de table jQuery. Grâce à cette méthode, les utilisateurs peuvent facilement ajouter, supprimer, modifier et interroger les données des tables, améliorant ainsi considérablement l'efficacité du travail. #🎜🎜#

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!