Geek Answers Handbook

JQuery css td change inside odd tr

I am trying to change the background of table cells in rows of an odd table and only certain cells using jQuery I know that I can do this to change odd or even rows

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

And I tried it, but it

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

But it just takes a cell regardless of the row. To better describe my problem, I want to change the background to blue on specific cells, but also have the cells in the even line darker.

How would I understand that?

+4
source share
2 answers

There seems to be a problem with this part. :Contains(' + $(this).val() + ')

You may need to enter the value in double quotes, for example ':contains("' + $(this).val() + '")'

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

choz $('#DisplayTable tr:odd td:contains("' + $(this).val() + '"').css(), , , ,

, ( user2181397)

$('#DisplayTable tr:even td:contains("1")').css("background", "yellow");
$('#DisplayTable tr:odd td:contains("1")').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>1</td><td>1</td><td>1</td></tr>
<tr><td>4</td><td>1</td><td>1</td></tr>
</table>
Hide result
0

More articles:


All Articles