1.表格变色

(1)普通的隔行变色

CSS代码:

.even{background:#fff;}   //偶数行样式

.even{background:#fff;}   //奇数行样式

①包括表头

$(function(){
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
})

②不包括表头

$(function(){
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
})

③某一行高亮

$("tr:contains('王五')").addClass("selected");

2.单选框控制表格行高亮,即:单击某一行后,此行被选中高亮显示,且单选框被选中

步骤:给表格添加单击事件,给单击的当前行添加高亮样式,将它的兄弟行的高亮样式去掉,将当前行里的单选框设置为选中

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

注释:①当前对象是$(this),当进行.addClass('selected')操作时对象未发生变化,当执行.siblings.removeClass('selected')时,对象变为$(this).siblings(),如果需要重新返回到$(this),就要使用end()方法

②如果表格初始化时,默认已经有单选框被选中,默认选中的行要被高亮显示

$('table:radio:checked').parent().parent().addClass('selected');

  

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

复选框能选则多行变色且不限制个数

单击某行时,如果已经高亮,移除高亮样式并去掉当前复选框的选中状态;若没高亮,添加高亮样式并将当前的复选框选中

判断是否已经高亮,使用hasClass()方法

$('tbaody>tr').click(function(){
if($(this).hasClass('selected')){
$(this)
.removeClass('selected')
.find('checkbox').attr('checked',false);
}else{
$(this)
.addClass('selected')
.find('checkbox').attr('checked',true);
}
});

简化:

$('tbaody>tr').click(function(){
var hasSelected=$(this).hasClass('selected');
$(this).[hasSelected?"removeClass":"addClass"]('selected');
.find('checkbox').attr('checked',! hasSelected);
});

  

4.表格展开关闭

<tr class="parent" id=row_01><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01"><td>张三</td></tr>
<tr class="child_row_02"><td>李四</td></tr>

给分类行设置了class="parent"属性以及id,子行设置了class属性,值在父id值得基础上加child

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

5.表格内容筛选→contains选择器+filter()筛选方法

jQuery对表格的操作的更多相关文章

  1. jQuery对表格的操作及其他应用

    表格操作 1.隔行变色:对普通表格进行隔行换色:单击显示高亮样式:复选框选中高亮 <!DOCTYPE html> <html> <head> <meta ht ...

  2. 5.2 《锋利的jQuery》jQuery对表格的操作(选项卡/换肤)

    表格隔行变色以及单选/复选 表格展开关闭 表格筛选 字体变大/缩小 选项卡 网页换肤 tip1: $("tr:odd")和$("tr:even")选择器索引是从 ...

  3. jQuery(6)——jQuery对表单、表格的操作及更多应用

    jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...

  4. jQuery 对表单、表格的操作及更多应用-简略笔记

    [jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...

  5. jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  6. JQuery实现表格的增加行和删除行

    利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...

  7. JQuery合并表格单元格

    转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格   一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...

  8. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

  9. ASP.NET MVC+BUI实现表格的操作

    在Web中基于表格的操作,比如添加行.单元格内容编辑等等功能,是完全基于js实现的.但如果程序员完全使用js或者jquery去编写表格控件,则会导致样式不统一,代码量较大等问题,尤其对于不太熟悉js的 ...

随机推荐

  1. Dom4J 解析xml ,类查询

    /** * 从XML文件比对,传入provinceId 返回 provinceShortName * @param provinceid * @return */ public static Stri ...

  2. Codeforces Round #535(div 3) 简要题解

    Problem A. Two distinct points [题解] 显然 , 当l1不等于r2时 , (l1 , r2)是一组解 否则 , (l1 , l2)是一组合法的解 时间复杂度 : O(1 ...

  3. Linux下启动mongodb

    完成安装mongodb(略) 创建数据目录: # mkdir /data/mongo 创建配置文件 # vi /data/mongo/mongodb.cnf dbpath=/data/mongo/ l ...

  4. easy_install 和 pip

    原文章:http://blog.csdn.net/xsj_blog/article/details/52037609 easy_install 和 pip的介绍: easy_install和pip都是 ...

  5. Linux 执行定时任务 shell脚本

    Linux上面执行定时任务,我们可以利用crontab -e直接编辑定时任务 另外我们还可以写好shell脚本,定时去执行shell脚本,这两个方法都可以起到定时执行的作用 下面我详细说一下入如何执行 ...

  6. 3-1Java程序的执行流程

    3-1Java程序的执行流程 用记事本写一个简单的程序 存到:E:\java路径下 class HelloImooc{    public static void main(String[] agrg ...

  7. unity2d 动画

    1 资源test.jpg(如下)放入Resources文件夹 2 切割图片 点击图片,在inspector中,选择Texture Type为Sprite(2D and UI),然后点击Sprite E ...

  8. 51nod1093(推公式&找規律)

    題目鏈接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1093 題意:中文題誒- 思路:xjb 一開始死活想不出怎麼將一 ...

  9. [Xcode 实际操作]一、博主领进门-(5)检测运行中的模拟器在各个方向上的切换

    目录:[Swift]Xcode实际操作 本文将演示Xcode的设备模拟器在各个方向上的切换和检测. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 检测运行中的模拟 ...

  10. 多线程 GCD队列组

    //  DYFViewController.m //  623-08-队列组 // //  Created by dyf on 14-6-23. //  Copyright (c) 2014年 ___ ...