ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryはテーブル行のマージを実装します
jqueryはテーブル行のマージを実装します
- 王林オリジナル
- 2023-05-14 14:20:38901ブラウズ
Web 開発では、テーブルは複数のデータを表示するために頻繁に使用される要素の 1 つです。ただし、より明確な情報を表示するために、複数行のデータを結合する必要がある場合があります。この記事では、jQueryを使ってテーブルの行を結合する方法を紹介します。
ステップ 1: マージする必要がある列を決定する
まず、どの列をマージする必要があるかを決定する必要があります。通常、どの列に同じ情報が含まれているかを考慮し、それらをマージする必要があります。
たとえば、以下の表では、2 列目の同じセルを結合する必要があります。
| 名前 | 件名 | 業績 |
|---|---|---|
| 張三 | 数学 | 90 |
| 李四 | 数学 | 80 |
| #张三 | 中文 | 85 |
| 李四 | 中文 | 95 |
ステップ 2: jQuery コードを作成する
マージする必要がある列を使用して、jQuery コードの作成を開始できます。コードの考え方は、隣接するセルを見つけて、内容が同じ場合にそれらを結合することです。
以下は具体的なコードの実装です:
function mergeCells(tableID, colList) {
// 遍历需要合并的列
for (var colIndex = 0; colIndex < colList.length; colIndex++) {
var startIndex = 1; // 开始合并的行
var endIndex = 0; // 结束合并的行
var preContent = ''; // 前一个单元格的内容
// 遍历每一行
$('#' + tableID + ' tr').each(function(rowIndex) {
var content = $(this).find('td:eq(' + colList[colIndex] + ')').text(); // 获取当前单元格的内容
// 判断当前单元格是否需要合并
if (rowIndex > startIndex && content == preContent) {
endIndex = rowIndex; // 更新结束合并的行索引
} else {
if (endIndex > startIndex) {
// 合并单元格
$(this).find('td:eq(' + colList[colIndex] + ')').attr('rowspan', endIndex - startIndex + 1);
// 隐藏被合并的单元格
for (var i = startIndex; i <= endIndex; i++) {
$('#' + tableID + ' tr:eq(' + i + ')').find('td:eq(' + colList[colIndex] + ')').hide();
}
}
// 更新开始合并的行索引和前一个单元格的内容
startIndex = rowIndex;
endIndex = rowIndex;
preContent = content;
}
});
}
}上記のコードはテーブル内の指定された列を走査し、同じセルを見つけて結合します。このうち、tableID はテーブルの ID で、colList はマージする必要がある列のインデックス リストです。
ステップ 3: 関数を呼び出して行を結合する
ページが読み込まれた後に、mergeCells 関数を呼び出してテーブルの行を結合できます。
たとえば、次のコードをページに追加します。
<body>
<table id="myTable">
<tr>
<th>姓名</th>
<th>学科</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>数学</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>数学</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>语文</td>
<td>85</td>
</tr>
<tr>
<td>李四</td>
<td>语文</td>
<td>95</td>
</tr>
</table>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
mergeCells('myTable', [1]);
});
</script>
</body>この方法で、テーブルの行を結合できます。
概要:
この記事では、jQuery を使用してテーブルの行を結合する方法を紹介します。隣接するセルを検索し、結合して非表示にする関数を記述することで、表の表示効果を簡単に実現できます。
もちろん、行を結合するだけでなく、同様のアイデアから学び、他の複雑なテーブル操作を実装することもできます。
以上がjqueryはテーブル行のマージを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。