如何使用 jquery 更改多个 td 元素的背景颜色答案

【问题标题】：how to change background color of multiple td elements using jquery如何使用 jquery 更改多个 td 元素的背景颜色
【发布时间】：2016-06-12 10:32:05
【问题描述】：

我无法使用 jquery 更改表中多个 td 元素的背景颜色。

HTML 代码：

<td id="trueValue">/com/website/seo/</td>

<td id="trueValue">/com/website/seo/</td>

<td id="falseValue">/com/website/seo/</td>

<td id="falseValue">/com/website/seo/</td>

jQuery 代码：

 $("td").each(function() {
 var i = $(this).attr("id");
 if (i == "trueValue") {
    $(i).css("background-color", "green");
    }
 });

上面的 jquery 什么也没做。有人可以更正我的代码吗？

非常感谢。

【问题讨论】：

为什么你多次使用相同的ID？错了……
谢谢。 Rory 或 Usman，有什么方法可以更正我的 HTML 吗？对不起，我是网络开发的新手。所以，请建议我如何继续。谢谢
@harshavmb 我为你添加了答案

标签： javascript jquery html css html-table

【解决方案1】：

您不能有多个元素具有相同的id。此示例中的 HTML 无效。如果要对元素进行分组，请使用类。然后您可以按类选择元素并将样式应用于它们，如下所示：

$('.truevalue').addClass('foo');

.foo {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="truevalue">/com/website/seo/</td>
    <td class="truevalue">/com/website/seo/</td>
    <td class="falsevalue">/com/website/seo/</td>
    <td class="falsevalue">/com/website/seo/</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

您不能在一个网页中多次使用相同的id。如果非常需要可以使用html5的data属性。

$("td[data-id='trueValue']").addClass("highlight");

.highlight {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td data-id="trueValue">/com/website/seo/</td>

      <td data-id="trueValue">/com/website/seo/</td>

      <td data-id="falseValue">/com/website/seo/</td>

      <td data-id="falseValue">/com/website/seo/</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案3】：

您应该使用 Table 来创建表格行及其描述。

HTML

<table>
  <tr>
    <td id="falseValue"> XYZ </td>
    <td id="trueValue"> ABC </td>
  </tr>
</table>

JQUERY

$("td").each(function() {
  var i = $(this).attr("id");
  if (i === 'trueValue') {
    $(this).css({
      'backgroundColor': 'green',
      'color': 'white'
    });
  }

});

工作小提琴：https://jsfiddle.net/rittamdebnath/p3fe1hv5/

【讨论】：