jQuery对表格的操作
jQuery对表格的操作
表格变色
<table>
<thead>
<tr><th>姓名</th><th>
性别</th><th>暂住地</th>
</thead>
<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;}
.odd{ background:#FFFFEE;}
$(function(){
$("tr:odd").addClass("odd"); //给奇数行添加样式
$("tr:even").addClass("even");//给偶数行添加样式
});
//如果需要将某一行变成高亮状态,使用contains选择器来实现。
$("tr:contains(''王五)").addClass("selected");
表格前加单选框
1.为表格添加单击事件 ，给单击的当前行添加高亮，将兄弟行的高亮取消
$('tbody>tr').click(function(){
$(this).addClass('selected')
.siblings().removeClass('selected')
.end()
.find(':radio').attr('checked',true);
});
当初始化表格时，如果已有默认单选框被选中，那么也需要处理。
$('tbody>tr:has(:checked)').addClass('selected');
复选框控制表格行高亮
$('tbody>tr').click(function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected')
.find(':checkbox').attr('checked',false); }
else{ $(this).addClass('selected').find(':checkbox').attr('checked',true) ;}
})
表格展开关闭
<table>
<thead>
<tr><th>姓名</th><th>
性别</th><th>暂住地</th>
</thead>
<tbody>
<tr class="parent" ><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01"><td> 张山</td><td>男</td><td>浙江</td></tr>
<tr class="child_row_01"><td> 张山</td><td>男</td><td>浙江</td></tr>
<tr class="parent" ><td colspan="3">UI设计组</td></tr>
<tr class="child_row_02"><td> 张山</td><td>男</td><td>浙江</td></tr>
<tr class="child_row_02"><td> 张山</td><td>男</td><td>浙江</td></tr>
<tr class="parent" ><td colspan="3">后台设计组</td></tr>
<tr class="child_row_03"><td> 张山</td><td>男</td><td>浙江</td></tr>
<tr class="child_row_03"><td> 张山</td><td>男</td><td>浙江</td></tr>
</tbody>
</table>
//单击分类行时，可以关闭相应的内容。再次单击，可打开
$(function(){
$('tr.parent').click(function(){ //获取所谓的父行
$(this).toggleClass("selected") //添加/删除高亮
.siblings('.child_'+this.id).toggle(); //隐藏/显示子行
});
});