Question

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

HTML code：

<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什么也没做。有人可以更正我的代码吗？

非常感谢提前。

Answer 1

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

＆＃13;

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

＆＃13;

.foo {
  background-color: green;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

.highlight {
  background: green;
}

＆＃13;

<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>

＆＃13;

Answer 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/

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

3 个答案: