有条件地改变表格单元格的背景颜色

Question

我有一个包含很多行的表。在每一行中都有一个id为'overwrite'的单元格。如果覆盖包含一个数字＆gt; 0比我想要将单元格的背景颜色更改为红色。

我的javascript看起来像这样：

$('#overwrite').each(function() {
    if (parseInt($(this).text()) > 0) {
        $(this).addClass('records_overwritten');
    }
});

这只会改变一个单元格的背景颜色，而不会改变其他单元格的背景颜色，即使它们也包含大于0的值。我对这个问题有点困惑。

以下是表格行的示例：

<tr>
  <td>March 18, 2014</td>
  <td>John Smith</td>
  <td>5</td>
  <td>10</td>
  <td id="overwrite">1</td>
  <td>56</td>
</tr>

Answer 1

由于ID在页面上必须是唯一的 - 并且$('#overwrite')最多会返回一个元素 - 使用类而不是重复ID的

$('.overwrite').each(function() {
    if (parseInt($(this).text(), 10) > 0) {
        $(this).addClass('records_overwritten');
    }
});

此外，如果要检查的列始终是每行的5 ^th <td>，您还可以避免插入不必要的属性，并且可以使用{{1}检索这些元素};

另请注意，$('tr td:nth-child(5)')需要基数作为第二个参数

Answer 2

将id更改为class

 <tr>
  <td>March 18, 2014</td>
  <td>John Smith</td>
  <td>5</td>
  <td>10</td>
  <td class="overwrite">1</td>
  <td>56</td>
 </tr>

并改为使用类选择器

 $('.overwrite').each(function() {.....

Answer 3

假设id属性对于页面是唯一的，因此jQuery仍然停止查找它。您可以使用以下选择器[id="overwrite"]解决这个问题，但您确实应该使用类或其他东西。

Answer 4

ID的目的是在页面上是唯一的，所以$（'＃ID'）。每个都不是一个好主意。也许您可以使用class或attr值进行识别。

关于背景设置：nearest（）是一个很好的解决方案。

$( ".overwrite" ).closest( "tr" ).css( "background-color", "red" );