Maison >interface Web >js tutoriel >Utilisez jQuery pour implémenter la numérotation automatique des lignes de tableaux dynamiques
Utilisez jQuery pour implémenter la numérotation automatique des lignes de tableaux dynamiques
- PHPzoriginal
- 2024-02-26 20:03:24824parcourir
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>Dans le tableau, nous laissons une balise <td> vide pour le numéro de série de placement. <code><td>标签，用于放置序号。<h2>JavaScript代码</h2>
<p>接下来，我们创建一个名为<code>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();
});
});以上代码中，我们首先在页面加载完成后调用updateTableIndex()函数来为表格添加初始的序号。然后使用on()
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;
}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 CSSAfin 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!