ホームページ > 記事 > ウェブフロントエンド > jQuery を使用して動的テーブル行の自動番号付けを実装する
jQuery を使用して動的テーブル行の自動番号付けを実装する
- PHPzオリジナル
- 2024-02-26 20:03:24702ブラウズ
jQuery を使用して、行数が増加するとテーブルのシリアル番号が自動的に変更されることを認識します。
Web 開発では、データ テーブルを表示する必要がよくあります。行数の増加に応じてテーブル番号が自動的に変更されることを期待しています。シリアル番号は 1 列に表示され、ユーザーがすぐに見つけられるようにしています。この記事では、jQuery ライブラリを使用して、行数の増加に応じてテーブルのシリアル番号が自動的に変更される効果を実現します。
HTML 構造
まず、以下に示すような単純な 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="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>テーブルでは、空の < ;td> を残しておきます。 タグ。シリアル番号を配置するために使用されます。
JavaScript コード
次に、テーブルシリアル番号の自動変更機能を実現するための jQuery コードを記述するための script.js という名前の JavaScript ファイルを作成します。
$(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() メソッドを使用して、テーブル内の行の追加イベントをリッスンします。新しい行が追加されると、シリアル番号を更新する関数がトリガーされます。
CSS スタイル
表をより美しくするために、いくつかの単純な CSS スタイルを追加することもできます。
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;
}結論
上記のコードを通じて例として、jQuery を使用して、行数の増加に応じてテーブルのシリアル番号が自動的に変更される効果を実現することに成功しました。このような機能により、ユーザーにより優れたデータ表示エクスペリエンスが提供され、Web ページの対話性も向上します。この記事が、フロントエンド開発を学んでいる人の助けになれば幸いです。また、コミュニケーションをとり、一緒に学び、一緒に進歩することも歓迎します。
以上がjQuery を使用して動的テーブル行の自動番号付けを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。