jQuery学习之路(6)- 简单的表格应用

▓▓▓▓▓▓ 大致介绍

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

▓▓▓▓▓▓ 表格变色

    基本的结构:

 1     <table>
 2         <thead>
 3             <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
 4         </thead>
 5         <tbody>
 6             <tr><td>张三</td><td>男</td><td>杭州</td></tr>
 7             <tr><td>王五</td><td>女</td><td>江苏</td></tr>
 8             <tr><td>李斯</td><td>男</td><td>北京</td></tr>
 9             <tr><td>赵六</td><td>女</td><td>兰州</td></tr>
10             <tr><td>往往</td><td>男</td><td>酒泉</td></tr>
11             <tr><td>李师傅</td><td>男</td><td>东京</td></tr>
12         </tbody>
13     </table>

    1、普通的隔行变色

      首先定义两个样式

1     .even{
2         background: #FFF38F;
3     }
4     .odd{
5         background: #FFFFEE;
6     }

    

    添加变色

1     $(‘tr:odd‘).addClass(‘odd‘);
2     $(‘tr:even‘).addClass(‘even‘);

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

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

1     $(‘tbody>tr‘).click(function(){
2         $(this)
3             .addClass(‘selected‘)
4             .siblings().removeClass(‘selected‘)
5             .end()
6             .find(‘:radio‘).attr(‘checked‘,true);
7     });

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

1     $(‘tbody>tr‘).click(function(){
2         if($(this).hasClass(‘selected‘)){
3             $(this).removeClass(‘selected‘)
4                    .find(‘:checkbox‘).attr(‘checked‘,false);
5         }else{
6             $(this).addClass(‘selected‘)
7                    .find(‘:checkbox‘).attr(‘checked‘,true);
8         }
9     });

▓▓▓▓▓▓ 表格展开关闭

    基本结构:

 1     <table>
 2         <thead>
 3             <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
 4         </thead>
 5         <tbody>
 6             <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
 7             <tr class="child_row_01"><td></td><td>张三</td><td>男</td><td>杭州</td></tr>
 8             <tr class="child_row_01"><td></td><td>王五</td><td>女</td><td>江苏</td></tr>
 9
10             <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
11             <tr class="child_row_02"><td></td><td>李斯</td><td>男</td><td>北京</td></tr>
12             <tr class="child_row_02"><td></td><td>赵六</td><td>女</td><td>兰州</td></tr>
13
14             <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
15             <tr class="child_row_03"><td></td><td>往往</td><td>男</td><td>酒泉</td></tr>
16             <tr class="child_row_03"><td></td><td>李师傅</td><td>男</td><td>东京</td></tr>
17         </tbody>
18     </table>

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

1     $(‘tr.parent‘).click(function(){
2         $(this).toggleClass(‘selected‘)
3                .siblings(‘.child_‘ + this.id).toggle();
4     });

▓▓▓▓▓▓ 表格内容筛选

    基本结构:

 1     <table>
 2         <thead>
 3             <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
 4         </thead>
 5         <tbody>
 6             <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
 7             <tr class="child_row_01"><td></td><td>张三</td><td>男</td><td>杭州</td></tr>
 8             <tr class="child_row_01"><td></td><td>王五</td><td>女</td><td>江苏</td></tr>
 9
10             <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
11             <tr class="child_row_02"><td></td><td>李斯</td><td>男</td><td>北京</td></tr>
12             <tr class="child_row_02"><td></td><td>赵六</td><td>女</td><td>兰州</td></tr>
13
14             <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
15             <tr class="child_row_03"><td></td><td>往往</td><td>男</td><td>酒泉</td></tr>
16             <tr class="child_row_03"><td></td><td>李师傅</td><td>男</td><td>东京</td></tr>
17         </tbody>
18     </table>
19     <input type="text" id="filterName" />

    添加事件

1     $(‘#filterName‘).keyup(function(){
2         $(‘table tbody tr‘).hide().filter(":contains(‘ "+($(this).val())+" ‘ )").show();
3     });
时间: 2024-11-09 02:38:06

jQuery学习之路(6)- 简单的表格应用的相关文章

Jquery 学习之路(四)高大上的图片轮换

网站首页没有一点动画怎么可以,我以前用过Flash As3做过图片切换,效果非常不错,可是麻烦,改变起来麻烦.一直都想自己做个图片切换效果,总认为比较麻烦,今天自己实践了一下,其实还比较简单.不过有个小问题,IE8不兼容模式下 设置有透明效果的div 样式添加失效了,但是我用谷歌,IE8兼容测试都ok. 反正是给自己记录的,也不多话了,js没有与页面分离,也没有做出插件.一个网站要不了几个这种效果,先实现了再说吧.最后的效果还是很高大上的. 下载地址:http://files.cnblogs.c

jQuery学习之路(四)之过滤选择器

今天是第四课主要学习过滤选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lesson4 过滤选择器</title> <link rel="stylesheet" type="text/css" href="css/lesson.css" ></link>

Jquery学习之路(三) 实现弹出层插件

弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask .mask { position: fixed; width: 100%; height: 100%; backgroun

jQuery 学习之路(4):事件

一.文档载入事件 二.事件绑定 三.事件对象 四.浏览器事件 五.表单事件 六.键盘事件 七.鼠标事件 jQuery 学习之路(4):事件,布布扣,bubuko.com

jQuery 学习之路(5):表单

处理表单中的元素 jQuery 学习之路(5):表单,布布扣,bubuko.com

jQuery学习之路(1)-选择器

▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优

jQuery学习之路-A

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="D:/jquery2.0/jquery-2.0.0.js"></scr

jQuery学习之路(5)- 简单的表单应用

▓▓▓▓▓▓ 大致介绍 接下来的这几个博客是对前面所学知识的一个简单的应用,来加深理解 ▓▓▓▓▓▓ 单行文本框 只介绍一个简单的样式:获取和失去焦点改变样式 基本结构: 1 <form action="#" method="post" id="regFrom"> 2 <fieldset> 3 <legend>个人基本信息</legend> 4 <div> 5 <label for

jQuery学习之路(8)- 表单验证插件-Validation

▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言.该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维