如何使用Javascript删除表格指定列的所有行对应单元格

问题原因 #

你当前代码的核心问题是document.querySelectorAll('td')会选中页面内所有td元素，按下标取到的y[k]只是全局排序后的第k个td，也就是第一行对应列的单元格，所以只会隐藏第一行的内容。

调整后的实现代码 #

// 提前获取所有表头、删除按钮元素，避免循环内重复查询DOM
const allTh = document.querySelectorAll('th');
const removeBtns = document.querySelectorAll('.removedor');
const colTotal = allTh.length;

for (let k = 0; k < colTotal; k++) {
  removeBtns[k].addEventListener('click', function() {
    // 隐藏当前列的表头
    allTh[k].style.display = 'none';
    // 遍历所有表格行，隐藏每行的第k个单元格
    document.querySelectorAll('tr').forEach(row => {
      const targetTd = row.querySelectorAll('td')[k];
      // 存在对应单元格才执行隐藏，避免表头行无td时报错
      if (targetTd) targetTd.style.display = 'none';
    });
  });
}

注意事项 #

如果页面有多个表格，建议给需要操作的表格设置唯一id（比如id="editTable"），将元素查询范围限定在该表格内，避免影响其他表格：

// 限定仅操作指定表格
const targetTable = document.querySelector('#editTable');
const allTh = targetTable.querySelectorAll('th');
const removeBtns = targetTable.querySelectorAll('.removedor');
const colTotal = allTh.length;

// 后续绑定事件的逻辑和上面一致

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