使用jQuery遍历HTML表格行，修改价格列内容

嘿，我来帮你搞定这个表格格式调整的问题～你的思路方向是对的，但有几个小细节需要修正，同时我也会给你更灵活的实现方案：

原代码的几个关键问题 #

• 字符串比较陷阱：你直接用tds.eq(5).text() > "20"属于字符串比较，比如"100"作为字符串和"20"对比时，会因为第一个字符"1"<"2"被误判为小于20，必须把文本转成数字再做比较。
• 文本赋值语法错误：tds.eq(5).text() = ...是错的，jQuery的text()方法需要传递参数来设置内容，正确写法是tds.eq(5).text(新内容)。
• 颜色修改方法：修改文本颜色可以用css()方法直接设置，更推荐用添加CSS类的方式（便于后续样式维护）。

修正后的基础版代码 #

$(document).ready(function () {
  $("table").find('tr').each(function(i, el){
    // 跳过表头行（如果你的表格第一行是表头的话）
    if(i === 0) return;
    
    var priceTd = $(this).find('td').eq(5);
    var price = parseFloat(priceTd.text().trim()); // 转成数字并去除多余空格
    
    if (!isNaN(price)) { // 确保是有效的数字才处理
      if (price > 20) {
        priceTd.text(price + "$");
      } else {
        // 直接设置文本颜色
        priceTd.css('color', 'red');
        // 或者添加CSS类（更推荐，样式和逻辑分离）
        // priceTd.addClass('low-price');
      }
    }
  });
});

更鲁棒的版本（通过表头定位Price列，不用固定索引） #

如果你的表格表头明确有"Price"列名，用下面的方式可以避免固定索引的局限（比如后续表格列顺序调整时不用改代码）：

$(document).ready(function () {
  // 先找到Price列的索引
  var priceColumnIndex = $('table th').filter(function() {
    return $(this).text().trim() === 'Price';
  }).index();
  
  // 确认找到Price列后再执行后续逻辑
  if(priceColumnIndex !== -1) {
    $("table").find('tr').each(function(i, el){
      if(i === 0) return; // 跳过表头
      
      var priceTd = $(this).find('td').eq(priceColumnIndex);
      var price = parseFloat(priceTd.text().trim());
      
      if (!isNaN(price)) {
        if (price > 20) {
          priceTd.text(`${price}$`); // 用模板字符串写法更简洁
        } else {
          priceTd.css('color', 'red');
        }
      }
    });
  }
});

额外样式提示 #

如果选择用CSS类管理样式，记得在页面中添加对应样式：

.low-price {
  color: red;
  /* 还可以按需添加其他样式，比如字体加粗 */
}

这种方式能让代码结构更清晰，样式和逻辑分离，后期维护起来更方便～

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