详解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 相关文章推荐
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
初识Node.js
Mar 20 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 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
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
python的sorted用法详解
2019/06/25 Python
python内存管理机制原理详解
2019/08/12 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
优秀教师获奖感言
2014/01/31 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
Python数据类型最全知识总结
2021/05/31 Python
SQLServer中exists和except用法介绍
2021/12/04 SQL Server