如何使用jQuery过滤表格数值并实现行高亮与删除？

云原生阿岚

2026-5-15

问题修复与完整实现方案

我来帮你搞定这个表格处理的需求，你的代码确实有几个小细节需要调整，同时我也会把“删除数量小于20的行”的逻辑补上：

你的代码问题分析

原生DOM元素误用jQuery方法：this在这里是原生的<td>DOM元素，它没有.text()方法，必须用$(this)把它转换成jQuery对象后才能调用.text()。
字符串与数字比较的坑：.text()返回的是字符串类型，直接和数字100比较会导致逻辑错误（比如字符串"99"会被认为比100大），需要先转成数字再比较。

修复后的完整代码

方案一：分两次筛选（逻辑清晰）

// 高亮第三列数值>=100的行
$("table tr td:nth-child(3)").filter(function() {
  // 转成整数并指定进制，避免意外的八进制解析
  return parseInt($(this).text(), 10) >= 100;
}).parent().css("background-color", "yellow");

// 删除第三列数值<20的行
$("table tr td:nth-child(3)").filter(function() {
  return parseInt($(this).text(), 10) < 20;
}).parent().remove();

方案二：单次遍历更高效

如果表格行数较多，推荐这个方案，只遍历一次所有行（排除表头），性能更好：

// 跳过表头行，遍历所有数据行
$("table tr:not(:first)").each(function() {
  const $row = $(this);
  const quantity = parseInt($row.find("td:nth-child(3)").text(), 10);
  
  if (quantity >= 100) {
    $row.css("background-color", "yellow");
  } else if (quantity < 20) {
    $row.remove();
  }
});