你的位置:首页 > 软件开发 > 网页设计 > jQuery对表格的操作

jQuery对表格的操作

发布时间:2017-08-20 13:00:12
1.表格变色(1)普通的隔行变色CSS代码:.even{background:#fff;} //偶数行样式.even{background:#fff;} //奇数行样式①包括表头$(function(){ $("tr:odd").addCla ...

1.表格变色

(1)普通的隔行变色

CSS代码:

.even{background:#fff;}   //偶数行样式

.even{background:#fff;}   //奇数行样式

①包括表头

$(function(){  $("tr:odd").addClass("odd");  $("tr:even").addClass("even");})

②不包括表头

$(function(){  $("tbody>tr:odd").addClass("odd");  $("tbody>tr:even").addClass("even");})

③某一行高亮

$("tr:contains('王五')").addClass("selected"); 

 

2.单选框控制表格行高亮,即:单击某一行后,此行被选中高亮显示,且单选框被选中

步骤:给表格添加单击事件,给单击的当前行添加高亮样式,将它的兄弟行的高亮样式去掉,将当前行里的单选框设置为选中

$('tbody>tr').click(function(){  $(this)    .addClass('selected')    .siblings.removeClass('selected')    .end()    .find(':radio').attr('checked',true);}); 

注释:①当前对象是$(this),当进行.addClass('selected')操作时对象未发生变化,当执行.siblings.removeClass('selected')时,对象变为$(this).siblings(),如果需要重新返回到$(this),就要使用end()方法

②如果表格初始化时,默认已经有单选框被选中,默认选中的行要被高亮显示

$('table:radio:checked').parent().parent().addClass('selected');

  

3.复选框控制表格行高亮

复选框能选则多行变色且不限制个数

单击某行时,如果已经高亮,移除高亮样式并去掉当前复选框的选中状态;若没高亮,添加高亮样式并将当前的复选框选中

判断是否已经高亮,使用hasClass()方法

$('tbaody>tr').click(function(){  if($(this).hasClass('selected')){   $(this)      .removeClass('selected')      .find('checkbox').attr('checked',false);  }else{    $(this)      .addClass('selected')      .find('checkbox').attr('checked',true);  }});

简化:

$('tbaody>tr').click(function(){  var hasSelected=$(this).hasClass('selected');  $(this).[hasSelected?"removeClass":"addClass"]('selected');    .find('checkbox').attr('checked',! hasSelected);});

  

4.表格展开关闭

<tr id=row_01><td colspan="3">前台设计组</td></tr><tr ><td>张三</td></tr><tr ><td>李四</td></tr>

给分类行设置了属性以及id,子行设置了class属性,值在父id值得基础上加child

$(function(){  $('tr.parent').click(function(){   $(this)      .toggleClass("selected");      .siblings('.child_'+this.id).toggle();  });});

 

5.表格内容筛选→contains选择器+filter()筛选方法

 

原标题:jQuery对表格的操作

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录