如何为已填充表格动态添加列及对应td并调整内容位置

我已经实现了在指定表头列（带data-something="1"的<th>）后添加新表头，但tbody里的每行并没有同步新增对应的空列，导致表格内容错位。请问怎么调整代码，让tbody每行也在对应位置新增列？

现有实现代码 #

HTML结构

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTable">
  <thead>
    <tr>
      <th>Id</th>
      <th data-something="1">Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody id="tblBody">
    <tr>
      <td>1</td>
      <td>a</td>
      <td>100</td>
    </tr>
    <tr>
      <td>2</td>
      <td>a</td>
      <td>100</td>
    </tr>
    <tr>
      <td>3</td>
      <td>a</td>
      <td>100</td>
    </tr>
  </tbody>
</table>

现有jQuery代码

$(document).ready(function() {
  something();
});

function something() {
  var newTh = "";
  var th = $(`#tblTable th[data-something="1"]`).last();
  newTh = `<th data-something="1-1">
                        New Column
                    </th>`;

  th.after(newTh);
}

解决方案 #

问题出在你只修改了表头，没有给tbody的每行添加对应的<td>。按以下步骤调整：

1. 先获取目标表头列的索引位置，确保tbody每行能准确定位插入点
2. 遍历tbody所有行，在对应索引的<td>后方插入新列
3. 可按需设置新列的默认内容或动态填充数据

修改后的完整jQuery代码：

$(document).ready(function() {
  something();
});

function something() {
  // 处理表头添加
  var targetTh = $('#tblTable th[data-something="1"]').last();
  var newTh = `<th data-something="1-1">New Column</th>`;
  targetTh.after(newTh);

  // 获取目标列的索引（从0开始计数）
  var targetIndex = targetTh.index();

  // 遍历tbody每行，插入对应新td
  $('#tblBody tr').each(function() {
    // 找到当前行对应索引的td，在它后面插入新列
    $(this).find('td').eq(targetIndex).after('<td>默认内容</td>');
  });
}

说明 #

• 用index()方法获取目标列位置，避免硬编码索引，适配表格列结构变化
• 新列内容可自定义，比如设为空值<td></td>，或根据该行数据动态生成内容

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