详解jQuery简单的表格应用


Posted in Javascript onDecember 16, 2016

大致介绍

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

表格变色

基本的结构:

<table>
    <thead>
      <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
    </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>

1、普通的隔行变色

首先定义两个样式

.even{
    background: #FFF38F;
  }
 .odd{
    background: #FFFFEE;
  } 
 

添加变色

$('tr:odd').addClass('odd');
 $('tr:even').addClass('even');

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

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

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

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

$('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><th>暂住地</th></tr>
    </thead>
    <tbody>
      <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
      <tr class="child_row_01"><td></td><td>张三</td><td>男</td><td>杭州</td></tr>
      <tr class="child_row_01"><td></td><td>王五</td><td>女</td><td>江苏</td></tr>
      <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
      <tr class="child_row_02"><td></td><td>李斯</td><td>男</td><td>北京</td></tr>
      <tr class="child_row_02"><td></td><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><td>酒泉</td></tr>
      <tr class="child_row_03"><td></td><td>李师傅</td><td>男</td><td>东京</td></tr>
    </tbody>
  </table>

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

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

表格内容筛选

基本结构:

<table>
    <thead>
      <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
    </thead>
    <tbody>
      <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
      <tr class="child_row_01"><td></td><td>张三</td><td>男</td><td>杭州</td></tr>
      <tr class="child_row_01"><td></td><td>王五</td><td>女</td><td>江苏</td></tr>
      <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
      <tr class="child_row_02"><td></td><td>李斯</td><td>男</td><td>北京</td></tr>
      <tr class="child_row_02"><td></td><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><td>酒泉</td></tr>
      <tr class="child_row_03"><td></td><td>李师傅</td><td>男</td><td>东京</td></tr>
    </tbody>
  </table>
  <input type="text" id="filterName" />

添加事件

$('#filterName').keyup(function(){
   $('table tbody tr').hide().filter(":contains(' "+($(this).val())+" ' )").show();
 });

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

Javascript 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
Jquery cookie操作代码
Mar 14 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
JS中parseInt()和map()用法分析
Dec 16 #Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 #Javascript
JS数字千分位格式化实现方法总结
Dec 16 #Javascript
jquery插件锦集【推荐】
Dec 16 #Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 #Javascript
JS实现字符串转驼峰格式的方法
Dec 16 #Javascript
详解js数组的完全随机排列算法
Dec 16 #Javascript
You might like
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
JS实现li标签的删除
2019/04/12 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
Python入门篇之面向对象
2014/10/20 Python
Python中join和split用法实例
2015/04/14 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
Python制作爬虫抓取美女图
2016/01/20 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
python进行参数传递的方法
2020/05/12 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
如何用python 操作zookeeper
2020/12/28 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
综合办公室主任职责
2013/12/16 职场文书
会计人员演讲稿
2014/09/11 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis
Python字符串的转义字符
2022/04/07 Python