Jquery在奇数tr中改变td的css

时间:2016-05-23 05:21:54

标签: javascript jquery html css

我正在尝试使用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");

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

我将如何实现这一目标?

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

这就是我想要的(从user2181397建议编辑)

&#13;
&#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;
&#13;
&#13;