首页  »   jQuery

jquery的报表的变色功能

网友分享于:2018-03-30  浏览:0次
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的一个选择器。此处不做解释。

 

 

 

 

 

 

 

相关解决方案

最新解决方案