jquery的表格的变色功能

 

 

jQuery中对于可以对于我们的表格进行很多操作，我们实现一下表格的变色。

 

首先我们来用学生的信息表来举例，下面是HTML代码 ：

 

 

<table>

     <thead>
              <tr><th>姓名</th><th>性别</th><th>家庭住址</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>

 

这是一个普通的表格，现在给它进行变色操作：

 

首先我们进行隔行变色

 

我们定义两个样式，css代码如下 ：

 

.even{ background: #fff38f ;}             /* .even表示偶数行*/
.odd{ background: #ffffee ;}                /* .even表示奇数行*/

 

 

现在对奇数行和偶数行来添加样式，可以用选择器来完成，代码如下：

 

$(function(){

          $("tr:odd").addclass("odd");    /* 给奇数行添加样式*/ 
          $("tr:even").addclass("even");  /* 给偶数行添加样式*/ 
     });

 

*此时注意$("tr:odd")和$("tr:odd")选择器的索引是从0开始的，所以要注意第一行是偶数行.

 

上面的代码会把表头也放进去，我们可以根据需要去除表头 ，具体代码如下：

 

$(function(){

          $("tbody>tr:odd").addclass("odd");       /* 给tbody中的奇数行添加样式*/ 
          $("tbody>tr:even").addclass("even");    /* 给tbody中的偶数行添加样式*/ 
     });

 

根据上面的的代码就实现了取出去除表头的奇偶行变色的效果

 

我们还可以按照自己的需求来写我们的代码，比如我们可以设定某一行的样式

 

我们先定义自己需要的样式，在这我们以变黄色为例

 

 

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

 

 

contains是jQuery的一个选择器。此处不做解释。