Utilisez jQuery pour implémenter la numérotation automatique des lignes de tableaux dynamiques

PHPz

Libérer： 2024-02-26 20:03:24

original

776 Les gens l'ont consulté

Utilisez jQuery pour implémenter la numérotation automatique des lignes de tableaux dynamiques

Utilisez jQuery pour réaliser que le numéro de série de la table change automatiquement à mesure que le nombre de lignes augmente

Dans le développement Web, il est souvent nécessaire d'afficher des tables de données, et on espère que le numéro de série sera affiché dans le premier colonne de chaque ligne du tableau pour faciliter la localisation rapide des utilisateurs. Dans cet article, nous utiliserons la bibliothèque jQuery pour obtenir l'effet de changement automatique du numéro de série de la table à mesure que le nombre de lignes augmente.

Structure HTML

Tout d'abord, nous préparons une structure de tableau HTML simple, 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>表格序号自动变化</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table id="data-table">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td></td>
            <td>李四</td>
            <td>30</td>
        </tr>
        <!-- 更多行 -->
    </tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Copier après la connexion

Dans le tableau, nous laissons une balise <td> vide pour le numéro de série de placement. <td>标签，用于放置序号。

JavaScript代码

接下来，我们创建一个名为script.js的JavaScript文件，用来编写 jQuery 代码来实现表格序号自动变化的功能。

$(document).ready(function() {
    updateTableIndex();

    // 实现序号自动更新的函数
    function updateTableIndex() {
        $('#data-table tbody tr').each(function(index) {
            $(this).find('td:first').text(index + 1);
        });
    }

    // 监听表格行增加的事件
    $('#data-table').on('DOMNodeInserted', 'tbody tr', function() {
        updateTableIndex();
    });
});

Copier après la connexion

以上代码中，我们首先在页面加载完成后调用updateTableIndex()函数来为表格添加初始的序号。然后使用on()

Code JavaScript

Ensuite, nous créons un fichier JavaScript nommé script.js pour écrire du code jQuery afin d'implémenter la fonction de modification automatique du numéro de série de la table.

body {
    font-family: Arial, sans-serif;
}

table {
    width: 100%;
    border-collapse: collapse;
}

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

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

Copier après la connexion

Dans le code ci-dessus, nous appelons d'abord la fonction updateTableIndex() pour ajouter un numéro de série initial à la table après le chargement de la page. Utilisez ensuite la méthode on() pour écouter l'événement d'ajout de lignes dans le tableau. Une fois une nouvelle ligne ajoutée, la fonction de mise à jour du numéro de série sera déclenchée.

Styles CSS

Afin de rendre le tableau plus beau, nous pouvons également ajouter quelques styles CSS simples : 🎜rrreee🎜Conclusion🎜🎜Grâce aux exemples de code ci-dessus, nous avons utilisé avec succès jQuery pour réaliser que le numéro de série de la table change automatiquement selon le nombre de lignes augmente. Une telle fonction peut offrir aux utilisateurs une meilleure expérience d'affichage des données et également améliorer l'interactivité des pages Web. J'espère que cet article pourra aider les amis qui apprennent le développement front-end. Nous invitons également tout le monde à communiquer et à apprendre ensemble pour progresser ensemble ! 🎜

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!