Rumah > Artikel > hujung hadapan web > jquery melaksanakan penggabungan baris jadual
jquery melaksanakan penggabungan baris jadual
- 王林asal
- 2023-05-14 14:20:38868semak imbas
Dalam pembangunan web, jadual ialah salah satu elemen yang kerap digunakan untuk memaparkan berbilang keping data. Tetapi kadangkala kita perlu menggabungkan berbilang baris data untuk memaparkan maklumat yang lebih jelas. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menggabungkan baris jadual.
Langkah 1: Tentukan lajur yang perlu digabungkan
Mula-mula kita perlu tentukan lajur yang perlu digabungkan. Biasanya, kita perlu mempertimbangkan lajur yang mempunyai maklumat yang sama dan perlu menggabungkannya.
Sebagai contoh, dalam jadual di bawah, kita perlu menggabungkan sel yang sama dalam lajur kedua.
| 姓名 | 学科 | 成绩 |
|---|---|---|
| 张三 | 数学 | 90 |
| 李四 | 数学 | 80 |
| 张三 | 语文 | 85 |
| 李四 | 语文 | 95 |
Langkah 2: Tulis kod jQuery
Dengan lajur yang perlu digabungkan, kita boleh mula menulis kod jQuery. Idea kod adalah untuk mencari sel bersebelahan dan menggabungkannya jika kandungannya sama.
Berikut ialah pelaksanaan kod khusus:
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;
}
});
}
}Kod di atas akan merentasi lajur yang ditentukan dalam jadual, mencari sel yang sama dan menggabungkannya. Antaranya, tableID ialah id jadual, dan colList ialah senarai indeks lajur yang perlu digabungkan.
Langkah 3: Panggil fungsi untuk menggabungkan baris
Kita boleh memanggil fungsi mergeCells untuk menggabungkan baris jadual selepas halaman dimuatkan.
Sebagai contoh, tambahkan kod berikut pada halaman:
<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>Dengan cara ini, baris jadual boleh digabungkan.
Ringkasan:
Artikel ini memperkenalkan penggunaan jQuery untuk menggabungkan baris jadual. Dengan menulis fungsi untuk mencari sel bersebelahan, menggabungkan dan menyembunyikannya, anda boleh mencapai kesan paparan jadual dengan mudah.
Sudah tentu, bukan sahaja menggabungkan baris, kita juga boleh belajar daripada idea yang serupa untuk melaksanakan operasi jadual kompleks yang lain.
Atas ialah kandungan terperinci jquery melaksanakan penggabungan baris jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!