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的一个选择器。此处不做解释。