有条件地更改表格单元格的背景颜色答案

【问题标题】：Conditionally change background color of table cell有条件地更改表格单元格的背景颜色
【发布时间】：2014-05-03 13:00:53
【问题描述】：

我有一张有很多行的表。在每一行中都有一个 id 为“覆盖”的单元格。如果覆盖包含一个大于 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>

【问题讨论】：

【解决方案1】：

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

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

此外，如果要检查的列始终是每行的第 5^th<td>，您还可以避免插入不必要的属性，您可以使用 $('tr td:nth-child(5)') 检索这些元素；

还要注意parseInt 需要一个基数作为第二个参数

【讨论】：

Fabrizio，我把你的代码（和他的）扔进了jsfiddle。它仍然不起作用。如果您想调整它以使其正常工作并将其添加到您的答案中，它可能会对 Graham 有很大帮助。
@Thomas 如果您使用 jQuery 代码，那么您必须包含 jQuery 库。现在在您的小提琴中没有包含任何库；）
谢谢，我添加了它，它可以工作。链接是JSFiddlehttp://jsfiddle.net/F2Q3V/1/。如果需要，您可以将其添加到您的答案中。希望格雷厄姆会选择你的答案。

【解决方案2】：

ID 在页面上是唯一的，所以 $('#ID').each 不是一个好主意。也许您可以使用 class 或 attr 值进行标识。

关于背景设置：这里closest()是一个很好的解决方案。

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

【讨论】：

【解决方案3】：

把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() {.....

【讨论】：

【解决方案4】：

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

【讨论】：