jQuery对表格的操作
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对表格的操作的更多相关文章
- jQuery对表格的操作及其他应用
表格操作 1.隔行变色:对普通表格进行隔行换色:单击显示高亮样式:复选框选中高亮 <!DOCTYPE html> <html> <head> <meta ht ...
- 5.2 《锋利的jQuery》jQuery对表格的操作(选项卡/换肤)
表格隔行变色以及单选/复选 表格展开关闭 表格筛选 字体变大/缩小 选项卡 网页换肤 tip1: $("tr:odd")和$("tr:even")选择器索引是从 ...
- jQuery(6)——jQuery对表单、表格的操作及更多应用
jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...
- jQuery 对表单、表格的操作及更多应用-简略笔记
[jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...
- jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- JQuery实现表格的增加行和删除行
利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...
- JQuery合并表格单元格
转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格 一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...
- jQuery实现表格行的动态增加与删除(改进版)
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...
- ASP.NET MVC+BUI实现表格的操作
在Web中基于表格的操作,比如添加行.单元格内容编辑等等功能,是完全基于js实现的.但如果程序员完全使用js或者jquery去编写表格控件,则会导致样式不统一,代码量较大等问题,尤其对于不太熟悉js的 ...
随机推荐
- Dom4J 解析xml ,类查询
/** * 从XML文件比对,传入provinceId 返回 provinceShortName * @param provinceid * @return */ public static Stri ...
- Codeforces Round #535(div 3) 简要题解
Problem A. Two distinct points [题解] 显然 , 当l1不等于r2时 , (l1 , r2)是一组解 否则 , (l1 , l2)是一组合法的解 时间复杂度 : O(1 ...
- Linux下启动mongodb
完成安装mongodb(略) 创建数据目录: # mkdir /data/mongo 创建配置文件 # vi /data/mongo/mongodb.cnf dbpath=/data/mongo/ l ...
- easy_install 和 pip
原文章:http://blog.csdn.net/xsj_blog/article/details/52037609 easy_install 和 pip的介绍: easy_install和pip都是 ...
- Linux 执行定时任务 shell脚本
Linux上面执行定时任务,我们可以利用crontab -e直接编辑定时任务 另外我们还可以写好shell脚本,定时去执行shell脚本,这两个方法都可以起到定时执行的作用 下面我详细说一下入如何执行 ...
- 3-1Java程序的执行流程
3-1Java程序的执行流程 用记事本写一个简单的程序 存到:E:\java路径下 class HelloImooc{ public static void main(String[] agrg ...
- unity2d 动画
1 资源test.jpg(如下)放入Resources文件夹 2 切割图片 点击图片,在inspector中,选择Texture Type为Sprite(2D and UI),然后点击Sprite E ...
- 51nod1093(推公式&找規律)
題目鏈接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1093 題意:中文題誒- 思路:xjb 一開始死活想不出怎麼將一 ...
- [Xcode 实际操作]一、博主领进门-(5)检测运行中的模拟器在各个方向上的切换
目录:[Swift]Xcode实际操作 本文将演示Xcode的设备模拟器在各个方向上的切换和检测. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 检测运行中的模拟 ...
- 多线程 GCD队列组
// DYFViewController.m // 623-08-队列组 // // Created by dyf on 14-6-23. // Copyright (c) 2014年 ___ ...