Color changing function of jquery table

In jQuery, we can perform many operations on our table, let's realize the color change of the table.

First, let's use the student's information sheet as an example. The following is the HTML code:

<table>

     <thead>
              <tr><th>Name</th><th>Gender</th><th>Home Address</th></tr>
     <tthead>

     <tbody>
               <tr><td>小张</td><td>男</td><td>山西</td></tr>
               <tr><td>小明</td><td>女</td><td>天津</td></tr>
               <tr><td>小王</td><td>男</td><td>上海</td></tr>
               <tr><td>小李</td><td>女</td><td>北京</td></tr>
               <tr><td>小赵</td><td>男</td><td>湖南</td></tr>
               <tr><td>小刘</td><td>男</td><td>贵州</td></tr>
      </tbody>

</table>

This is a normal table, now let's colorize it:

First we do interlaced color change

We define two styles, the css code is as follows:

.even{ background: #fff38f ;} /* .even means even lines*/
.odd{ background: #ffffee ;} /* .even means odd lines*/

Now add styles to odd and even lines, which can be done with selectors, the code is as follows:

$(function(){

          $("tr:odd").addclass("odd"); /* add style to odd lines */
          $("tr:even").addclass("even"); /* add style to even lines */
     });

*At this point, note that the indexes of the $("tr:odd") and $("tr:odd") selectors start from 0, so pay attention to the even-numbered line in the first line.

The above code will also put the header, we can remove the header as needed, the specific code is as follows:

$(function(){

          $("tbody>tr:odd").addclass("odd"); /* Add styles to odd lines in tbody */
          $("tbody>tr:even").addclass("even"); /* Add style to even lines in tbody */
     });

According to the above code, the effect of removing the color of the parity row of the header is realized.

We can also write our code according to our own needs, for example, we can set the style of a certain line

We first define the style we need, here we take yellow as an example

$("tr:contains("张三")").addclass(background:#FFFF00);

contains is a selector for jQuery. No explanation is given here.

Color changing function of jquery table

Guess you like