Comment utiliser jQuery pour ajouter facilement des lignes à un tableau

Comment utiliser jQuery pour ajouter facilement des lignes à un tableau

Dans le développement Web, les tableaux sont l'un des éléments de page couramment utilisés, et l'ajout dynamique de lignes aux tableaux est également l'une des fonctions qui doivent souvent être implémentées. Vous pouvez facilement ajouter des lignes au tableau à l'aide de jQuery. La méthode d'implémentation spécifique sera présentée ci-dessous et un exemple de code sera joint.

Tout d'abord, nous avons besoin d'une structure de table HTML de base :

<table id="myTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Canada</td>
        </tr>
    </tbody>
</table>
<button id="addRowBtn">Add Row</button>

Ensuite, nous utilisons jQuery pour écrire le code d'opération permettant d'ajouter des lignes :

$(document).ready(function() {
    $("#addRowBtn").click(function() {
        var newRow = "<tr><td>New Name</td><td>New Age</td><td>New Country</td></tr>";
        $("#myTable tbody").append(newRow);
    });
});

Dans le code ci-dessus, nous transmettons d'abord le $(document) .ready de jQuery () pour garantir que le document est chargé avant d'effectuer l'opération. Écoutez ensuite l'événement click du bouton via la méthode $("#addRowBtn").click() et exécutez la fonction de rappel lorsque le bouton est cliqué. $(document).ready() 方法来确保文档加载完毕后再执行操作。然后通过 $("#addRowBtn").click() 方法监听按钮的点击事件，当按钮被点击时执行回调函数。

在回调函数中，我们使用变量 newRow 来存储一个新的表格行的HTML代码，然后通过 $("#myTable tbody").append(newRow) 将新的行添加到表格的 <tbody>Dans la fonction de rappel, nous utilisons la variable <code>newRow pour stocker le code HTML d'une nouvelle ligne de tableau, puis passons $("#myTable tbody").append(newRow) Ajoutez de nouvelles lignes au du tableau.

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!