详解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实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
详解微信小程序的 request 封装示例
Aug 21 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 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取得一个类的属性和方法的实现代码
2011/05/22 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python中使用中文的方法
2011/02/19 Python
python 中文乱码问题深入分析
2011/03/13 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
Python3爬楼梯算法示例
2019/03/04 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
简历的自荐信
2013/12/19 职场文书
2014年党务公开方案
2014/05/08 职场文书
春节慰问简报
2015/07/21 职场文书
遗嘱格式范本
2015/08/07 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
Python何绘制带有背景色块的折线图
2022/04/23 Python