Exemple de démonstration : utilisez jQuery pour supprimer l'élément td dans le tableau-js tutoriel-php.cn

Exemple de démonstration : utilisez jQuery pour supprimer l'élément td dans le tableau

PHPz

Libérer： 2024-02-23 11:45:04

original

1207 Les gens l'ont consulté

Exemple de démonstration : utilisez jQuery pour supprimer lélément td dans le tableau

Résumé : Cet article expliquera comment utiliser jQuery pour supprimer l'élément td dans le tableau et démontrera le processus à travers des exemples de code spécifiques.

Dans le développement Web, nous rencontrons souvent des situations où les éléments des tableaux doivent être manipulés dynamiquement. Vous pouvez utiliser jQuery pour supprimer facilement l'élément td du tableau. Ce qui suit utilisera des exemples de code spécifiques pour montrer comment supprimer l'élément td dans la table via jQuery.

Tout d’abord, nous avons besoin d’une structure de tableau HTML simple comme exemple. Supposons que nous ayons un tableau avec 3 lignes et 4 colonnes, comme indiqué ci-dessous :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除表格中的td元素</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="myTable" border="1">
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
    <td>行1列3</td>
    <td>行1列4</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
    <td>行2列3</td>
    <td>行2列4</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
    <td>行3列3</td>
    <td>行3列4</td>
  </tr>
</table>
<button id="deleteBtn">删除单元格</button>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous créons un tableau avec 3 lignes et 4 colonnes, et ajoutons un bouton pour déclencher l'opération de suppression.

Ensuite, nous utiliserons jQuery pour implémenter la fonction de suppression de l'élément td dans le tableau. Voici l'exemple de code jQuery complet :

$(document).ready(function(){
  $('#deleteBtn').click(function(){
    // 删除第二行第三列的单元格
    $('#myTable tr:eq(1) td:eq(2)').remove();
  });
});

Copier après la connexion

Dans le code ci-dessus, nous utilisons d'abord $(document).ready() pour nous assurer que le document est chargé avant d'exécuter le code. Écoutez ensuite l'événement de clic sur le bouton via $('#deleteBtn').click(). Lorsque vous cliquez sur le bouton, la fonction de rappel sera exécutée. Dans la fonction de rappel, nous utilisons $('#myTable tr:eq(1) td:eq(2)').remove() pour sélectionner les cellules de la deuxième ligne et de la troisième colonne, et Supprime-le. $(document).ready()来确保文档加载完成后再执行代码。然后通过$('#deleteBtn').click()来监听按钮的点击事件。当按钮被点击时，会执行其中的回调函数。在回调函数中，我们使用$('#myTable tr:eq(1) td:eq(2)').remove()来选中第二行第三列的单元格，并将其删除。

最后，我们只需要在页面中引入jQuery库，并将上述jQuery代码放置在<script></script>

Enfin, il suffit d'introduire la bibliothèque jQuery dans la page et de placer le code jQuery ci-dessus dans la balise <script></script> pour réaliser la fonction de suppression de l'élément td dans le tableau.

Grâce à l'exemple de démonstration ci-dessus, les lecteurs peuvent apprendre à utiliser jQuery pour supprimer l'élément td dans le tableau et comprendre le processus d'implémentation de code spécifique. J'espère que cet article sera utile aux lecteurs lorsqu'ils traiteront des éléments de tableau dans le développement Web. 🎜

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!