如何从表格中删除行？移除第三列空单元格行的jQuery代码异常

嘿，我来帮你搞定这个表格删行的问题！你遇到的直接用$(this).remove()无效的情况，主要是原代码里的索引匹配错误和冗余DOM查询导致的，咱们一步步来修正：

原代码的问题分析 #

1. 索引计数不匹配：
   jQuery的nth-child()是从1开始计数的（你这里A=3对应第三列），但eq()是从0开始计数的。原代码里用td:eq(" + A + ")会去查找第4列（因为A=3），这就导致你获取的cellValue根本不是当前td的内容，判断条件cellValue.length === 0自然不会触发，所以直接remove的时候没反应。
2. 冗余且错误的DOM查询：
   在each循环里，$(this)已经指向当前遍历的td元素了，完全没必要再用$("#tbl tr:eq(" + index + ") td:eq(" + A + ")")去重新查找，这不仅低效，还容易出错。

修正后的代码 #

1. 直接删除（无过渡效果）的正确写法 #

function TT(){ 
  var targetColumn = 3; // 目标是第三列（nth-child从1开始计数）
  $('table tbody tr td:nth-child(' + targetColumn + ')').each(function(){ 
    // 直接用$(this)获取当前td的文本内容，trim()避免空格被误判为非空
    var cellValue = $(this).text().trim(); 
    if (cellValue.length === 0){ 
      // 找到当前td最近的父级tr并删除
      $(this).closest('tr').remove(); 
    }
  });
}

这里用closest('tr')代替parents('tr')更高效，因为closest只会查找最近的父级tr元素，而parents会遍历所有父级节点。

2. 带fadeOut过渡效果的正确写法 #

如果还是需要过渡动画，修正后的代码如下：

function TT(){ 
  var targetColumn = 3; 
  $('table tbody tr td:nth-child(' + targetColumn + ')').each(function(){ 
    var cellValue = $(this).text().trim(); 
    if (cellValue.length === 0){ 
      // 先执行淡出动画，动画完成后再删除元素
      $(this).closest('tr').fadeOut(function(){ 
        $(this).remove(); 
      });
    }
  });
}

注意：fadeOut的回调函数里的this指向的是被淡出的tr元素，所以直接在回调里用$(this).remove()就可以完成删除。

额外小提示 #

• 如果你明确表格的ID是tbl，可以把选择器改成$('#tbl tbody tr td:nth-child(' + targetColumn + ')')，这样查询更精准，避免页面上其他表格被误操作。
• 记得在合适的时机调用TT()函数，比如页面加载完成后：$(document).ready(function(){ TT(); });

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