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

Question

我有一个有很多行的表。 在每一行中都有一个id为'overwrite'的单元格。 如果覆盖包含一个> 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 <td>每一行的，还可能避免不必要的插入属性和可以检索与这些元素$('tr td:nth-child(5)') ;

另请注意， parseInt需要一个基数作为第二个参数

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" );