详解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 相关文章推荐
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
js canvas实现俄罗斯方块
Oct 11 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
python通过post提交数据的方法
2015/05/06 Python
Django卸载之后重新安装的方法
2017/03/15 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
python实现函数极小值
2019/07/10 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书