js实现表格合并
实现表格合并的方法
在JavaScript中实现表格合并通常涉及操作DOM元素，合并相邻的相同单元格。以下是几种常见的方法：
使用原生JavaScript合并行
通过遍历表格的行和列，检查相邻单元格内容是否相同，若相同则进行合并。
function mergeCells(tableId, columnIndex) {
const table = document.getElementById(tableId);
let previousText = '';
let startRow = 0;
for (let i = 0; i < table.rows.length; i++) {
const currentText = table.rows[i].cells[columnIndex].innerText;
if (currentText === previousText) {
table.rows[i].deleteCell(columnIndex);
table.rows[startRow].cells[columnIndex].rowSpan++;
} else {
previousText = currentText;
startRow = i;
}
}
}使用jQuery简化操作
如果项目中已引入jQuery，可以更简洁地实现合并功能。
function mergeCells(tableId, columnIndex) {
$(`#${tableId} tr`).each(function() {
const currentText = $(this).find('td').eq(columnIndex).text();
if (currentText === $(this).prev().find('td').eq(columnIndex).text()) {
$(this).find('td').eq(columnIndex).remove();
$(this).prev().find('td').eq(columnIndex).attr('rowspan',
parseInt($(this).prev().find('td').eq(columnIndex).attr('rowspan') || 1) + 1);
}
});
}合并列的实现
合并列的逻辑与合并行类似，但需要横向遍历单元格。
function mergeColumns(tableId, rowIndex) {
const table = document.getElementById(tableId);
let previousText = '';
let startCol = 0;
for (let i = 0; i < table.rows[rowIndex].cells.length; i++) {
const currentText = table.rows[rowIndex].cells[i].innerText;
if (currentText === previousText) {
table.rows[rowIndex].cells[i].remove();
table.rows[rowIndex].cells[startCol].colSpan++;
} else {
previousText = currentText;
startCol = i;
}
}
}动态表格的合并处理
对于动态生成的表格，可以在数据渲染完成后调用合并函数。
function renderTable(data) {
const table = document.getElementById('dynamic-table');
data.forEach(item => {
const row = table.insertRow();
row.insertCell().textContent = item.name;
row.insertCell().textContent = item.category;
});
mergeCells('dynamic-table', 1); // 合并第二列
}注意事项
- 合并操作会修改DOM结构，可能影响后续的单元格索引。
- 合并后的单元格需通过
rowSpan或colSpan属性正确设置跨行/列数。 - 对于复杂表格，建议先备份原始数据以便恢复。
以上方法可根据实际需求调整，适用于大多数表格合并场景。
