js实现表格合并
实现表格合并的方法
使用原生JavaScript合并单元格
通过操作DOM元素的rowSpan和colSpan属性实现单元格合并：
function mergeCells(tableId, startRow, endRow, col) {
const table = document.getElementById(tableId);
for (let i = startRow; i < endRow; i++) {
const cell = table.rows[i].cells[col];
if (cell) {
cell.style.display = 'none';
table.rows[startRow].cells[col].rowSpan += 1;
}
}
}使用jQuery合并单元格
jQuery简化了DOM操作，可以更简洁地实现合并：
function mergeTableCells(tableSelector) {
$(tableSelector + ' td').each(function() {
const td = $(this);
if (td.text() === td.next().text() && td.index() === td.next().index()) {
td.attr('colspan', 2);
td.next().remove();
}
});
}动态表格合并方案
对于动态生成的表格，需要先处理数据再渲染：
function processTableData(data) {
return data.reduce((acc, row) => {
const lastRow = acc[acc.length - 1];
if (lastRow && row.key === lastRow.key) {
lastRow.span = (lastRow.span || 1) + 1;
} else {
acc.push({...row});
}
return acc;
}, []);
}响应式表格合并技巧
结合CSS实现响应式表格合并效果：
.merged-cell {
grid-column: span 2;
text-align: center;
}function responsiveMerge(tableId) {
const table = document.getElementById(tableId);
const rows = table.querySelectorAll('tr');
rows.forEach(row => {
const cells = row.querySelectorAll('td');
cells.forEach((cell, index) => {
if (cell.textContent === cells[index + 1]?.textContent) {
cell.classList.add('merged-cell');
cells[index + 1].style.display = 'none';
}
});
});
}复杂表头合并方案
对于多级表头的复杂表格合并：
function mergeComplexHeader(tableId) {
const table = document.getElementById(tableId);
const headerRows = table.querySelectorAll('thead tr');
headerRows.forEach((row, rowIndex) => {
const cells = row.querySelectorAll('th');
let spanCount = 1;
cells.forEach((cell, cellIndex) => {
const nextCell = cells[cellIndex + 1];
if (nextCell && cell.textContent === nextCell.textContent) {
spanCount++;
nextCell.style.display = 'none';
} else {
if (spanCount > 1) {
cell.colSpan = spanCount;
spanCount = 1;
}
}
});
});
}注意事项
- 合并前确保表格结构规整，行列数一致
- 合并操作应在DOM加载完成后执行
- 动态数据表格需要在数据更新后重新执行合并
- 合并后需要调整样式保证视觉一致性
- 考虑添加合并/取消合并的交互功能
以上方法可以根据具体需求组合使用，实现不同复杂度的表格合并需求。
