jQuery教程 对表格的操作详解
沉沙 2018-09-20 来源 : 阅读 1164 评论 0

摘要:本篇教程介绍了jQuery教程 对表格的操作详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

本篇教程介绍了jQuery教程 对表格的操作详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

<

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 class="parent" id=row_01><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01"><td>张三</td></tr>
<tr class="child_row_02"><td>李四</td></tr>

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

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


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

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程