使用JQuery修改特定ID的HTML元素

Question

I am new to JQuery and I have a very basic question about this.

I have two html table elements, one with id="needColor" and another one without id.

I want to set the background color of an row on the with id = "needColor" but not on the table without any id.

How can I do this with the JQuery?

The current code is as follows:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"</script>
<script>
$(document).ready(function(){

//tried to add something like these, but I am not sure how it must be written

// this makes all the even row in "all" table to be yellow
$("tr:even").css("background-color", "yellow");

// this will give the whole yellow color of table with id = needColor
$("table[id='needColor']").css("background-color", "yellow"); // do not use ("#needColor") as this will affect other elements than "table"


});
</script>

Thanks.

Answer 1

$("#needColor tr:even").css("background-color", "yellow");

The first part of the selector, #needColor , gets the element with that id. td:even means get the even tr elements. The space between those two parts means that the tr elements should be descendents of the first element.

If you have more than one element with id="needColor" then you have invalid html: id is supposed to be unique, so if you need to identify multiple elements as needing colour you should use a class rather than id. But still, if you can't change the html for some reason then you can do this:

$("table[id='needColor'] tr:even").css("background-color", "yellow");

Note though that you don't need any JavaScript/jQuery for this, you can do it just with CSS. In your stylesheet:

table[id='needColor'] tr:nth-child(even) {
  background-color: yellow;
}

Answer 2

Try this:

$("#needColor tr:even").css("background-color", "yellow");

Or this (But I would suggest above):

$("table[id='needColor'] tr:even").css("background-color", "yellow");

Both of them will set background color to yellow of table with id "needColor"