如何用JavaScript/jQuery拆分动态生成表格的单元格（横/纵向）

我在拆分动态生成的表格单元格时遇到了瓶颈，目前已完成的JavaScript代码如下：

function splitcell(){
    var tableid = localStorage.getItem('value');
    var table = document.getElementById(tableid);
    var td = table.querySelectorAll('td.highlight');

    if(td.length > 1){
        alert("You cannot split two highlighted cells at a time. Please choose one cell to split at a time"); 
    }
    var clone =  td[0].cloneNode(true);
    alert(clone.outerHTML);
}

对应的HTML表格代码：

<table id="ideaef0" class="table-striped" style="margin-left: -120px; width: 950px; margin-top: 30px;" onclick="RealClickHandler(this)" border="1">
   <thead>
   <tr>
     <th id="thid55e9e" class="ui-resizable">
        <input type="text" class="header-input" placeholder="Edit Header 1"><span></span>
     </th>
     <th id="thid55e9e" class="ui-resizable">
        <input type="text" class="header-input" placeholder="Edit Header 2"><span></span>
     </th>
     </tr>
     </thead>
     <tbody>
  <tr>
     <td class="ui-resizable" contenteditable="true">
     </td>
     <td class="ui-resizable" contenteditable="true">
     </td>
     </tr>
     <tr>
     <td class="ui-resizable" contenteditable="true">
      </td>
      <td class="ui-resizable" contented="true">
     </td>
     </tr>
     <tr>
     <td class="ui-resizable" contenteditable="true">
     </td>
     <td class="ui-resizable" contenteditable="true">
     </td>
    </tr>
    <tr>
     <td class="ui-resizable" contenteditable="true">
     </td>
     <td class="ui-resizable" contenteditable="true">
     </td>
     </tr>
    </tbody>
</table>

我想要实现单元格的横向和纵向拆分，了解核心思路是复制td时处理colspan或rowspan属性，但需要相关的实现帮助。

核心逻辑说明 #

• 横向拆分（拆分列）：将目标单元格的colspan值均分（无colspan则默认视为1），生成两个新单元格替换原单元格，各自分配拆分后的colspan值。
• 纵向拆分（拆分行）：在目标单元格所在行下方插入新行，均分原单元格的rowspan值，原单元格和新行对应位置的单元格分别设置对应的rowspan值，同时保证新行列数与表格一致。

代码实现 #

将原函数拆分为横向、纵向两个独立函数，分别处理不同拆分逻辑：

// 横向拆分单元格（拆分列）
function splitCellHorizontally() {
    const tableId = localStorage.getItem('value');
    const table = document.getElementById(tableId);
    const highlightedCells = table.querySelectorAll('td.highlight');
    
    if (highlightedCells.length !== 1) {
        alert("只能一次拆分一个高亮单元格");
        return;
    }
    
    const targetCell = highlightedCells[0];
    const parentRow = targetCell.parentNode;
    const originalColspan = parseInt(targetCell.getAttribute('colspan')) || 1;
    
    // 拆分后均分colspan，保留余数避免总跨度不一致
    const newColspan = Math.floor(originalColspan / 2);
    const remainingColspan = originalColspan - newColspan;
    
    // 创建两个新单元格，复制原单元格属性
    const cell1 = targetCell.cloneNode(true);
    cell1.setAttribute('colspan', newColspan);
    cell1.classList.remove('highlight');
    
    const cell2 = targetCell.cloneNode(true);
    cell2.setAttribute('colspan', remainingColspan);
    cell2.classList.remove('highlight');
    
    // 替换原单元格
    parentRow.replaceChild(cell1, targetCell);
    parentRow.insertBefore(cell2, cell1.nextSibling);
}

// 纵向拆分单元格（拆分行）
function splitCellVertically() {
    const tableId = localStorage.getItem('value');
    const table = document.getElementById(tableId);
    const highlightedCells = table.querySelectorAll('td.highlight');
    
    if (highlightedCells.length !== 1) {
        alert("只能一次拆分一个高亮单元格");
        return;
    }
    
    const targetCell = highlightedCells[0];
    const parentRow = targetCell.parentNode;
    const tableBody = parentRow.parentNode;
    const originalRowspan = parseInt(targetCell.getAttribute('rowspan')) || 1;
    
    // 拆分后均分rowspan，保留余数
    const newRowspan = Math.floor(originalRowspan / 2);
    const remainingRowspan = originalRowspan - newRowspan;
    
    // 修改原单元格的rowspan值
    targetCell.setAttribute('rowspan', newRowspan);
    targetCell.classList.remove('highlight');
    
    // 创建新行，复制原行结构并调整单元格
    const newRow = parentRow.cloneNode(true);
    const newCells = newRow.querySelectorAll('td');
    
    // 清空新行原有单元格，重新构建
    newCells.forEach(cell => cell.remove());
    
    // 按原行结构填充新行单元格
    Array.from(parentRow.children).forEach((cell, index) => {
        if (cell === targetCell) {
            // 目标位置添加拆分后的单元格
            const newCell = targetCell.cloneNode(true);
            newCell.setAttribute('rowspan', remainingRowspan);
            newRow.appendChild(newCell);
        } else {
            // 其他位置生成空单元格，保持列数一致
            const emptyCell = cell.cloneNode(true);
            emptyCell.innerHTML = '';
            emptyCell.removeAttribute('rowspan');
            newRow.appendChild(emptyCell);
        }
    });
    
    // 将新行插入原行下方
    tableBody.insertBefore(newRow, parentRow.nextSibling);
}

使用说明 #

在页面中添加触发按钮，绑定拆分函数：

<button onclick="splitCellHorizontally()">横向拆分单元格</button>
<button onclick="splitCellVertically()">纵向拆分单元格</button>

确保你的RealClickHandler函数能正确给选中的单元格添加highlight类，这样拆分函数才能识别目标单元格。

注意事项 #

• 若原单元格已设置colspan/rowspan，拆分时会自动均分属性，保证表格布局稳定。
• 纵向拆分时需同步处理新行的所有单元格，避免表格列数错乱。
• 如需支持拆分成多个单元格（不止2个），可修改拆分逻辑，将原跨度值分成对应份数，生成多个新单元格/新行。

内容的提问来源于stack exchange，提问作者Djouonang