Implémentation jQuery de la mise à jour automatique des numéros de ligne du tableau-js tutoriel-php.cn

Implémentation jQuery de la mise à jour automatique des numéros de ligne du tableau

PHPz

Libérer： 2024-02-26 16:06:33

original

750 Les gens l'ont consulté

Implémentation jQuery de la mise à jour automatique des numéros de ligne du tableau

jQuery est une bibliothèque JavaScript populaire largement utilisée dans le développement Web. Dans le développement Web, nous rencontrons souvent des situations dans lesquelles les données doivent être affichées, et les tableaux sont un moyen courant d'afficher les données. Dans un tableau dynamique, il y a souvent des opérations telles que la suppression, l'ajout, le tri, etc. A ce moment, il est nécessaire de mettre à jour automatiquement les numéros de série du tableau lorsque le nombre de lignes du tableau change. Ce qui suit présentera en détail comment utiliser jQuery pour réaliser cette fonction.

L'exemple de code est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Implémentation jQuery de la mise à jour automatique des numéros de ligne du tableau</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
    }
</style>
</head>
<body>
<h1>表格示例</h1>
<table id="data-table">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Alice</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Bob</td>
            <td>30</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Charlie</td>
            <td>28</td>
        </tr>
    </tbody>
</table>

<button id="add-row">新增行</button>
<button id="delete-row">删除行</button>

<script>
    // 初始表格序号
    function updateRowNumber() {
        $('#data-table tbody tr').each(function(index) {
            $(this).find('td:first').text(index + 1);
        });
    }

    // 新增行
    $('#add-row').on('click', function() {
        $('#data-table tbody').append('<tr><td></td><td>New</td><td>0</td></tr>');
        updateRowNumber();
    });

    // 删除行
    $('#delete-row').on('click', function() {
        $('#data-table tbody tr:last').remove();
        updateRowNumber();
    });
</script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, une table contenant le nom et l'âge est d'abord créée, et un en-tête contenant le numéro de série, le nom et l'âge est ajouté. Ensuite, j'ai utilisé jQuery pour écrire deux écouteurs d'événements, respectivement pour ajouter et supprimer des lignes. Parmi eux, grâce à la fonction updateRowNumber函数实现了当表格行数变化时，自动更新表格中的序号。新增行和删除行的操作都会调用updateRowNumber, le numéro de série est automatiquement mis à jour lorsque le nombre de lignes du tableau change.

Grâce à de tels exemples de code, vous pouvez facilement implémenter la fonction de mise à jour automatique du numéro de série lorsque le nombre de lignes du tableau change, afin que le tableau puisse conserver un bon effet d'affichage lorsque les données changent dynamiquement.

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!