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. 【servlet学习1】使用eclipse+tomcat开发servlet示例

    零.开发环境 1.eclipse+tomcat(tomcat插件已安装到eclipse中). 一.开发servlet步骤 1.在eclipse中新建工程 File —> New —> Ot ...

  2. 在项目中添加全局的 pch 文件

    说明,本片博文仅仅是方便自己以后在添加 pch 文件的配置时候参照使用,担心一些配置的路径由于时间而遗忘. (1)建一个 pch 文件 注意下面要 在 Targets 后打上 对号 (2)对该文件进行 ...

  3. git 系统中 post-receive 钩子不能正常执行 git pull 解决方法

    有一个需求是本地git在push到远程 git repo 之后,在远程服务器上自动在/dir/foo下执行 git pull 的操作.想来是一个很简单的需求,不就是在远程的 foo.git 仓库中的 ...

  4. c++中的友元重载

    1 语法 返回值类型 operator 运算符名称(形参列表) { 重载实体 } --------->operator和运算符名称在一起构造成新的函数名 2 案例 #include <io ...

  5. python 内置函数的补充 isinstance,issubclass, hasattr ,getattr, setattr, delattr,str,del 用法,以及元类

    isinstance   是 python中的内置函数 , isinstance()用来判断一个函数是不是一个类型 issubclass  是python 中的内置函数,  用来一个类A是不是另外一个 ...

  6. HDU - 1232 畅通工程-并查集模板

    某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府“畅通工程”的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道路相连,只要互相间接通过道路可达即可). ...

  7. [WIP]webpack 概念

    创建: 2019/04/09 概念    入口 指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始. 进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖 ...

  8. Node中的console控制台

    1. Node中的console类似于浏览器中的控制台console,它的作用在于帮助开发人员做API的辅助测试. 2. Node中的console主要功能:REPL 2.1 read 读取你输入的内 ...

  9. meta标签常用属性

    Keywords(关键词) 说明:告诉搜索引擎你网页的关键字(keywords)使用方法:<meta name="keywords" content="标签,属性, ...

  10. HDU2824【欧拉函数性质】

    思路: 打表. 利用公式. 类似素数打表一样. #include<bits/stdc++.h> using namespace std; const int N=3e6+10; bool ...