How to use jquery to control the color of table odd and even rows and active rows_jquery

Although jquery has been popular for many years, I have always found it difficult and I have not taken the time to learn it. I just occasionally look at it on a whim one day, and then forget all about it after many days. Recently, I used a table with odd and even rows of different colors, and I had to look at jquery again. Although it still feels difficult, it is no longer as difficult as before. After finishing it, I have to sigh that jquery is really awesome. I don’t need to write a lot of javascript functions to implement it. It can be easily done with a few simple sentences.

First define the odd and even row style of the table, as follows:

Copy the code The code is as follows:

body {
font-size:12px;
}

th {
color: #FFFFFF;
background: #A172AC;
}

table,table td,table th {
padding: 0.5em;
margin: 0;
border:0;
border-spacing:0;
}
/* odd items 1,3,5,7,... */
table tbody tr.odd,
.odd {
background: #FBD106;
}

/* even items 2,4,6,8,... */
table tbody tr.even,
.even {
background: #E6453B;
}

/* hovered items */
.odd:hover,
.even:hover,
.hover {
background: #4BB747;
color: #FFFFFF;
}

Then there is the page code:

Copy the code The code is as follows:

< ;/tr>

data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data

If not required For mouse events, as long as odd and even rows have different colors, you can directly use CSS.

Copy code The code is as follows:

table tr:nth-child(even) td,
table tr:nth-child(even) th {
background-color: #FBD106;
}

table tr:nth-child(odd) td,
table tr: nth-child(odd) th {
background-color: #E6453B;
}