ホームページ > 記事 > ウェブフロントエンド > jQuery を使用して動的に増加するテーブルのシリアル番号を実装する
jQuery を使用して動的に増加するテーブルのシリアル番号を実装する
- WBOYオリジナル
- 2024-02-26 19:51:331195ブラウズ
jQuery を使用して、行数の変化に応じてテーブルのシリアル番号が自動的に増加することを認識します
Web 開発では、シリアル番号を追加する必要がある状況によく遭遇します。テーブルに。テーブル内の行数が頻繁に変更される場合は、テーブル内のシリアル番号を動的に調整する必要がありますが、jQuery を使用するとこの機能を簡単に実現できます。この記事では、jQuery を使用して行数の変化に応じてテーブル内のシリアル番号を自動的に増やす効果を実現する方法を紹介し、具体的なコード例を添付します。
まず、HTML ファイルにテーブルを作成し、シリアル番号を表示するためにシリアル番号を含むセルをテーブルの各行に追加する必要があります。コードは次のとおりです。
<!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="myTable">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td class="index"></td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td class="index"></td>
<td>李四</td>
<td>25</td>
</tr>
<tr>
<td class="index"></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> 上記のコードでは、シリアル番号、名前、年齢の 3 つの列を含む単純なテーブルを定義し、シリアル番号の cellindex# にクラス名を追加しました。 ##、jQuery での選択に使用されます。
script.js を作成します。コードは次のとおりです。
$(document).ready(function() {
$("#myTable tbody tr").each(function(index) {
$(this).find(".index").text(index + 1);
});
$("#myTable").on("DOMNodeInserted", function() {
$("#myTable tbody tr").each(function(index) {
$(this).find(".index").text(index + 1);
});
});
$("#myTable").on("DOMNodeRemoved", function() {
$("#myTable tbody tr").each(function(index) {
$(this).find(".index").text(index + 1);
});
});
}); 上記のコードでは、ページが読み込まれた後、まず each メソッドを通じてテーブル内の各行を走査し、対応するシーケンス番号をセルのシリアル番号の値。次に、on メソッドを使用してテーブル内の行の挿入および削除イベントをリッスンします。テーブル内の行数が変更されると、各行のシリアル番号セルの値が再調整され、シリアル番号は、行数の変化に応じて自動的に増加する可能性があります。
script.js ファイルに保存し、HTML ファイルに jQuery ライブラリと JavaScript ファイルを導入すると、テーブルのシリアル番号が変更されます。行数に応じて効果が自動的に増加します。
以上がjQuery を使用して動的に増加するテーブルのシリアル番号を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。