使用jQuery为固定行数表格添加/删除列问题求助

嘿，我看你在实现固定行数表格的列删除功能时遇到了麻烦，咱们来一步步排查并解决这个问题～

问题根源 #

你当前的删除逻辑里有个关键错误：

$('#tblSample tr').eq(index).closest('td').remove();

closest('td')是向上查找最近的父级td元素，但<tr>本身就是<td>的父容器，这行代码根本找不到要删除的目标单元格，所以删除操作完全没生效。

修正方案 #

正确的做法应该是：

• 点击删除按钮时，先获取该按钮所在单元格的列索引
• 遍历表格的每一行，删除对应索引的单元格

下面是修正后的完整代码：

$(document).ready(function() {
 $('#addColumn').click(function(e) {
  for (let index = 0; index < 7; index++) {
   if (index == 0) {
    // 把删除按钮的id改成class，避免重复id导致的问题
    $("#tblSample tr").eq(index).append('<td>Detail <button type="button" class="removeColumn">-</button></td>');
   } else {
    $("#tblSample tr").eq(index).append('<td><input type="text"></td>');
   }
  }
 });
 // 绑定事件到class选择器，支持多列删除按钮
 $('#tblSample thead').on('click', '.removeColumn', function(event) {
  // 获取当前删除按钮所在td的列索引
  const colIndex = $(this).closest('td').index();
  // 遍历每一行，删除对应索引的单元格
  $("#tblSample tr").each(function() {
   $(this).find('td').eq(colIndex).remove();
  });
 });
});

额外优化点 #

• 把删除按钮的id="removeColumn"改成class="removeColumn"：因为添加多列后会生成多个删除按钮，HTML中id必须唯一，重复id会导致事件绑定异常。
• 用each()遍历行比手动for循环更简洁，也能适配后续行数调整的场景。

内容的提问来源于stack exchange，提问作者Christian Dave Macalino