如何使用JavaScript或jQuery高效增减系谱表末尾列

原表格结构 #

<table>
<thead>
  <tr>
    <td rowspan="8">Ancestor 1</td>
    <td rowspan="4">Ancestor 2</td>
    <td rowspan="2">Ancestor 4</td>
    <td>Ancestor 8</td>
  </tr>
  <tr>
    <td>Ancestor 9</td>
  </tr>
  <tr>
    <td rowspan="2">Ancestor 5</td>
    <td>Ancestor 10</td>
  </tr>
  <tr>
    <td>Ancestor 11</td>
  </tr>
  <tr>
    <td rowspan="4">Ancestor 3</td>
    <td rowspan="2">Ancestor 6</td>
    <td>Ancestor 12</td>
  </tr>
  <tr>
    <td>Ancestor 13</td>
  </tr>
  <tr>
    <td rowspan="2">Ancestor 7</td>
    <td>Ancestor 14</td>
  </tr>
  <tr>
    <td>Ancestor 15</td>
  </tr>
</thead>
</table>

需求说明 #

为上述系谱表高效实现末尾列的添加/删除操作，新增列时单元格数量翻倍，需保留已有数据，支持动态操作。

实现方案 #

一、添加末尾列 #

核心思路：通过复制现有行并调整rowspan属性，实现最底层节点的子节点扩展，保证行数量翻倍，末尾列单元格数量翻倍。

原生JavaScript实现

function addColumn() {
  const table = document.querySelector('table thead');
  const rows = Array.from(table.querySelectorAll('tr'));
  // 倒序遍历，避免处理新插入的行
  for (let i = rows.length - 1; i >= 0; i--) {
    const row = rows[i];
    const lastTd = row.lastElementChild;
    // 复制当前行
    const newRow = row.cloneNode(true);
    // 清空新行中除最后一列外的所有单元格
    while (newRow.children.length > 1) {
      newRow.removeChild(newRow.firstElementChild);
    }
    // 设置原行最后一个单元格的rowspan为2
    lastTd.setAttribute('rowspan', 2);
    // 给新行的单元格设置默认内容（可根据需求修改）
    newRow.firstElementChild.textContent = `New Ancestor ${rows.length + i + 1}`;
    // 插入新行到原行之后
    row.after(newRow);
  }
}

jQuery实现

function addColumn() {
  const $rows = $('table thead tr');
  // 倒序遍历
  $rows.get().reverse().forEach(row => {
    const $row = $(row);
    const $lastTd = $row.find('td:last');
    // 复制行并清空多余单元格
    const $newRow = $row.clone().children('td:not(:last)').remove().end();
    // 设置原单元格rowspan
    $lastTd.attr('rowspan', 2);
    // 设置新单元格内容
    $newRow.find('td').text(`New Ancestor ${$rows.length * 2 - $rows.index(row)}`);
    // 插入新行
    $row.after($newRow);
  });
}

二、删除末尾列 #

核心思路：移除每组行中的第二行，同时取消上一行末尾单元格的rowspan属性，恢复到上一层结构。

原生JavaScript实现

function removeColumn() {
  const table = document.querySelector('table thead');
  const rows = Array.from(table.querySelectorAll('tr'));
  // 若行数为初始值（8），则不删除（可根据需求调整）
  if (rows.length === 8) return;
  // 步长为2，遍历每组的第一行
  for (let i = 0; i < rows.length; i += 2) {
    const row = rows[i];
    const lastTd = row.lastElementChild;
    // 移除rowspan属性
    lastTd.removeAttribute('rowspan');
    // 删除当前行的下一行
    if (rows[i + 1]) {
      rows[i + 1].remove();
    }
  }
}

jQuery实现

function removeColumn() {
  const $rows = $('table thead tr');
  if ($rows.length === 8) return; // 保留初始结构，可按需修改
  // 遍历每组第一行，步长2
  for (let i = 0; i < $rows.length; i += 2) {
    const $row = $rows.eq(i);
    $row.find('td:last').removeAttr('rowspan');
    $rows.eq(i + 1).remove();
  }
}

方案优势 #

• 高效性：通过倒序遍历避免重复处理新插入的行，使用DOM直接操作/批量处理减少重排次数；
• 数据保留：仅调整末尾列相关的单元格和行，原有数据不受影响；
• 结构合规：严格遵循系谱表的层级关系，保证rowspan属性正确维护表格结构。

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