详解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 相关文章推荐
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
jQuery实现元素的插入
Feb 27 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 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常用的小程序代码段
2015/11/14 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
python网络编程之五子棋游戏
2020/05/14 Python
python删除某个目录文件夹的方法
2020/05/26 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
世界上最大的艺术社区:SAA
2020/12/30 全球购物
木工主管岗位职责
2013/12/08 职场文书
怎样写好自荐信和推荐信
2013/12/26 职场文书
工程业务员岗位职责
2013/12/31 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
学校春季防火方案
2014/06/08 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
使用pandas模块实现数据的标准化操作
2021/05/14 Python
python中的plt.cm.Paired用法说明
2021/05/31 Python
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
使用MybatisPlus打印sql语句
2022/04/22 SQL Server
Redis唯一ID生成器的实现
2022/07/07 Redis