Question

我正在尝试使用Jquery更改奇数表行中的表格单元格和仅某些单元格的背景我知道我可以这样做来改变奇数或偶数行

$("#DisplayTable tr:visible:even").css("background", "#999999");
$("#DisplayTable tr:visible:odd").css("background", "#ffffff");

我试过这个但是这个

$('#DisplayTable td:Contains(' + $(this).val() + '):odd').css("background", "#A8CBFF");
$('#DisplayTable td:Contains(' + $(this).val() + '):even').css("background", "#66a3ff");

但是这只是占用单元格而不管行。为了更好地描述我的问题，我想在某些单元格上将背景更改为蓝色，但在偶数行中的单元格也要更暗。

我将如何实现这一目标？

Answer 1

似乎问题在于:Contains(' + $(this).val() + ')部分

您可能需要将值放在双引号中，例如':contains("' + $(this).val() + '")'

另请注意，根据此link，它必须是:contains。

见下面的原型。

$('#DisplayTable td:contains("1"):odd').css("background", "yellow");
$('#DisplayTable td:contains("2"):even').css("background", "orange");

table, th, td {
   border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id ="DisplayTable">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>2</td><td>3</td><td>1</td></tr>
<tr><td>3</td><td>4</td><td>1</td></tr>
<tr><td>4</td><td>2</td><td>1</td></tr>
</table>

Answer 2

choz建议$('#DisplayTable tr:odd td:contains("' + $(this).val() + '"').css()，这似乎完全符合我的要求

这就是我想要的（从user2181397建议编辑）

＆＃13;

$('#DisplayTable tr:even td:contains("1")').css("background", "yellow");
$('#DisplayTable tr:odd td:contains("1")').css("background", "orange");

＆＃13;

table, th, td {
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id ="DisplayTable">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>2</td><td>3</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>4</td><td>1</td><td>1</td></tr>
</table>

＆＃13;

Jquery在奇数tr中改变td的css

2 个答案: