详解jQuery简单的表格应用

前端之家收集整理的这篇文章主要介绍了详解jQuery简单的表格应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

大致介绍

在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQuery的认识。

表格变色

基本的结构:

姓名@H_404_14@性别@H_404_14@暂住地@H_404_14@ @H_403_23@

1、普通的隔行变色

首先定义两个样式

 @H_403_23@

添加变色

@H_403_23@

2、单选框控制表格行高亮

在每一行之前加一个单选按钮,当单击某一行后,此行被选中高亮显示并且单选框被选中

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

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

tr').click(function(){ if($(this).hasClass('selected')){ $(this).removeClass('selected') .find(':checkBox').attr('checked',false); }else{ $(this).addClass('selected') .find(':checkBox').attr('checked',true); } }); @H_403_23@

表格展开关闭

基本结构:

@H_404_14@姓名@H_404_14@性别@H_404_14@暂住地@H_404_14@ 前台设计组前台开发组后台开发组 @H_403_23@

添加事件,当点击一个分类标题时,这个分类关闭或者打开

@H_403_23@

表格内容筛选

基本结构:

@H_404_14@姓名@H_404_14@性别@H_404_14@暂住地@H_404_14@ 前台设计组前台开发组后台开发组 @H_403_23@

添加事件

@H_403_23@

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:https://www.f2er.com/jquery/43460.html

猜你在找的jQuery相关文章