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" id="row_01"><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" id="row_02"><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" id="row_03"><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(); //隐藏/显示子行
});
});