js实现点击实现合并
使用 JavaScript 实现点击合并功能
监听点击事件
通过 addEventListener 监听目标元素的点击事件，触发合并逻辑：
document.getElementById('mergeButton').addEventListener('click', mergeElements);定义合并函数
编写合并逻辑函数，例如合并表格单元格或 DOM 元素：
function mergeElements() {
const selectedCells = document.querySelectorAll('.selected');
if (selectedCells.length < 2) return;
const firstCell = selectedCells[0];
firstCell.colSpan = selectedCells.length;
for (let i = 1; i < selectedCells.length; i++) {
selectedCells[i].remove();
}
}添加选中状态
通过 CSS 类标记被选中元素，支持多选合并：
document.querySelectorAll('.merge-target').forEach(item => {
item.addEventListener('click', function() {
this.classList.toggle('selected');
});
});表格合并示例
针对表格单元格合并的完整实现：
let startCell = null;
document.querySelectorAll('td').forEach(cell => {
cell.addEventListener('click', function() {
if (!startCell) {
startCell = this;
startCell.classList.add('merge-start');
} else {
const endCell = this;
const startIndex = startCell.cellIndex;
const endIndex = endCell.cellIndex;
if (startCell.parentNode === endCell.parentNode) {
startCell.colSpan = endIndex - startIndex + 1;
for (let i = startIndex + 1; i <= endIndex; i++) {
startCell.parentNode.deleteCell(i);
}
}
startCell.classList.remove('merge-start');
startCell = null;
}
});
});注意事项
- 合并前需验证元素是否可合并（如同行/同列）
- 动态生成的元素需要事件委托
- 合并后可能需要调整布局样式
- 考虑添加撤销合并功能
扩展方案
对于复杂合并需求，可使用第三方库如：
- Handsontable 处理表格合并
- jQuery 简化 DOM 操作
- 自定义合并算法处理特殊数据结构
