如何在表格两列数量相等时修改对应行的背景颜色？

你的需求是当表格中pre_qty列与total_qty列数值相等时，给对应行设置特定背景色。原代码存在几个核心问题：

• 变量名与表格列名未对应（quantity_rep/quantity_total需关联表格的pre_qty/total_qty）
• 选择器$(".input_out")会选中所有匹配元素，无法精准定位到当前行
• 未建立数据与DOM行的关联逻辑

下面提供两种可行的实现方案：

方案一：直接遍历表格DOM行判断 #

无需依赖外部数据数组，直接读取表格行的列值进行判断：

// 遍历表格tbody下的所有行
$(".s-table tbody tr").each(function() {
  // 获取当前行的pre_qty和total_qty值，转为数字类型避免字符串比较误差
  const preQty = parseInt($(this).find("td:eq(1)").text().trim(), 10);
  const totalQty = parseInt($(this).find("td:eq(2)").text().trim(), 10);
  
  // 根据数值是否相等设置背景色
  if (preQty === totalQty) {
    $(this).css('background-color', '#8bc34a');
  } else {
    $(this).css('background-color', '#ffffff');
  }
});

方案二：结合外部数据数组myDataCheck操作 #

如果myDataCheck数组的元素顺序与表格行完全一致，可通过索引关联DOM行：

// 遍历数据数组，同时获取元素索引
myDataCheck.forEach((obj, index) => {
  const quantityRep = obj.quantity_rep; // 对应表格pre_qty列
  const quantityTotal = obj.quantity_total; // 对应表格total_qty列
  // 获取对应索引的表格行
  const $targetRow = $(".s-table tbody tr").eq(index);
  
  if (quantityRep === quantityTotal) {
    $targetRow.css('background-color', '#8bc34a');
  } else {
    $targetRow.css('background-color', '#ffffff');
  }
});

优化建议（可选） #

如果需要更易维护的样式管理，可定义CSS类替代直接设置行内样式：

.match-row {
  background-color: #8bc34a;
}
.default-row {
  background-color: #ffffff;
}

对应的JS代码改为：

// 匹配时的操作
$targetRow.addClass('match-row').removeClass('default-row');
// 不匹配时的操作
$targetRow.addClass('default-row').removeClass('match-row');

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