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

706 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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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