la table jquery supprime dynamiquement une ligne de données-Questions et réponses frontales-php.cn

la table jquery supprime dynamiquement une ligne de données

王林

Libérer： 2023-05-23 11:53:37

original

765 Les gens l'ont consulté

Lors du développement d'applications Web, les tableaux de données sont un composant courant, généralement utilisé pour afficher des données. Cependant, nous devons parfois supprimer une certaine ligne de données de la table, et il est très pratique d'utiliser jQuery pour réaliser cette fonction.

Dans jQuery, nous utilisons généralement la méthode remove() pour supprimer des éléments DOM. Par conséquent, lors de la suppression d'une ligne de données dans le tableau, nous devons d'abord obtenir l'élément DOM de cette ligne, puis utiliser la méthode remove() pour le supprimer du tableau. remove() 方法来删除 DOM 元素。因此，在删除表格中的一行数据时，我们需要先获取这一行的 DOM 元素，然后使用 remove() 方法将其从表格中移除。

首先，让我们看一下如何获取表格中的一行数据。假设我们有一个表格，其中每一行都有一个删除按钮，当用户点击删除按钮时，我们需要将该行从表格中删除。以下是一个示例表格的 HTML 代码：

<table id="data-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td><button class="delete-row">Delete</button></td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>jane.smith@example.com</td>
      <td><button class="delete-row">Delete</button></td>
    </tr>
    <!-- more rows -->
  </tbody>
</table>

Copier après la connexion

在这个表格中，每一行都包含三个单元格，其中最后一个单元格包含一个名为 "Delete" 的按钮。现在，我们可以使用 jQuery 来为每个删除按钮添加一个点击事件处理程序，以删除其对应的行。以下是实现代码：

$(document).ready(function() {
  // 添加点击事件处理程序
  $('.delete-row').click(function() {
    // 获取要删除的行
    var row = $(this).closest('tr');
    // 从表格中移除行
    row.remove();
  });
});

Copier après la connexion

在上面的代码中，我们首先使用 $() 函数在文档载入完毕后查找所有名为 "delete-row" 的按钮，并为每个按钮添加了一个点击事件处理程序。当用户点击删除按钮时，点击事件将触发，并将执行回调函数。

在回调函数中，我们使用 closest() 方法查找当前按钮所在的行，并将该行存储在 row 变量中。然后，我们使用 remove() 方法将该行从表格中移除。

需要注意的是，尽管我们使用了 closest()

Tout d'abord, voyons comment obtenir une ligne de données dans le tableau. Supposons que nous ayons un tableau dans lequel chaque ligne a un bouton de suppression et que lorsque l'utilisateur clique sur le bouton de suppression, nous devons supprimer cette ligne du tableau. Voici le code HTML d'un exemple de tableau :

rrreee

Dans ce tableau, chaque ligne contient trois cellules dont la dernière contient un bouton nommé "Supprimer". Maintenant, nous pouvons utiliser jQuery pour ajouter un gestionnaire d'événements de clic à chaque bouton de suppression afin de supprimer sa ligne correspondante. Voici le code d'implémentation : #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous utilisons d'abord la fonction $() pour trouver tous les noms nommés "delete-row" une fois le document chargé . boutons et ajout d’un gestionnaire d’événements de clic pour chaque bouton. Lorsque l'utilisateur clique sur le bouton Supprimer, l'événement click se déclenche et la fonction de rappel est exécutée. #🎜🎜##🎜🎜#Dans la fonction de rappel, nous utilisons la méthode closest() pour trouver la ligne où se trouve le bouton actuel et stockons la ligne dans la row variable. Nous utilisons ensuite la méthode remove() pour supprimer la ligne du tableau. #🎜🎜##🎜🎜#Il est à noter que bien que nous utilisions la méthode closest(), elle ne trouvera que l'élément correspondant le plus proche, donc si le bouton supprimer n'est pas directement contenu dans la ligne , Au lieu de cela, vous devez modifier le sélecteur pour qu'il corresponde au bon élément. #🎜🎜##🎜🎜#Voici comment supprimer dynamiquement une ligne de données dans une table à l'aide de jQuery. Si vous développez une application Web, l'utilisation de cette approche peut permettre aux utilisateurs de modifier et de gérer plus facilement les 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!