Supprimer les cellules spécifiées dans le tableau à l'aide de jQuery

Titre : Utilisez jQuery pour supprimer des éléments de cellule spécifiques dans le tableau

Dans le développement Web, nous rencontrons souvent des situations où nous devons utiliser des tableaux, et l'une d'entre elles consiste à supprimer des éléments de cellule spécifiques dans le tableau. Cette fonction peut être facilement réalisée en utilisant jQuery. Ce qui suit utilisera des exemples de code spécifiques pour montrer comment utiliser jQuery pour supprimer des éléments de cellule spécifiques dans un tableau.

Tout d'abord, nous avons besoin d'une structure de tableau HTML simple à titre d'exemple :

<table id="myTable">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td><button class="deleteBtn">删除</button></td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td><button class="deleteBtn">删除</button></td>
    </tr>
</table>

Dans l'exemple ci-dessus, nous avons un tableau contenant le nom, l'âge et les boutons d'action, et la dernière cellule de chaque ligne contient un bouton "Supprimer". Notre objectif est de supprimer les données de la ligne après avoir cliqué sur le bouton "Supprimer".

Ensuite, nous utilisons jQuery pour implémenter la fonction de suppression. Introduisez d'abord la bibliothèque jQuery dans la page :

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Ensuite, écrivez du code jQuery pour implémenter la fonction de suppression :

<script>
$(document).ready(function(){
    $('.deleteBtn').click(function(){
        $(this).closest('tr').remove();
    });
});
</script>

Dans le code ci-dessus, nous utilisons d'abord l'élément $(document).ready()来确保页面加载完成后再执行代码。然后，我们通过$('.deleteBtn').click()来监听所有“删除”按钮的点击事件。当点击按钮时，通过$(this).closest('tr').remove()找到最接近的<tr> (c'est-à-dire la ligne actuelle), puis supprimons la ligne. <p>Maintenant, lorsque vous cliquez sur le bouton "Supprimer" d'une ligne, les données de cette ligne seront supprimées du tableau. </p> <p>Avec l'exemple de code détaillé ci-dessus, nous montrons comment supprimer des éléments de cellule spécifiques dans un tableau à l'aide de jQuery. Cette méthode est simple et efficace et peut nous aider à effectuer des opérations sur les tables plus facilement dans le développement Web. </p> </tr>

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!