文档章节

JQuery之表格常见操作技巧

米线爱上烧饼
 米线爱上烧饼
发布于 2016/06/11 23:52
字数 394
阅读 14
收藏 0

移动鼠标行变色

$('#table1 tr').hover(function(){
    $(this).children('td').addClass('hover')
}, function(){
    $(this).children('td').removeClass('hover')
});
//:gt(n)匹配所有给定大于给定索引值
$("#table1 tr:gt(0)").hover(function() { 
    $(this).children("td").addClass("hover"); 
}, function() { 
    $(this).children("td").removeClass("hover"); 
});

奇偶不同色

$('#table1 tbody tr:odd').css('background-color', '#bbf');//odd为奇
$('#table1 tbody tr:even').css('background-color','#ffc');//even为偶
//操作class
$("#table1 tbody tr:odd").addClass("odd");
$("#table1 tbody tr:even").addClass("even");

隐藏一行

$('#table1 tbody tr:eq(3)').hide();//:eq(n)匹配一个给定索引元素
$("#table1 tr td::nth-child(3)").hide();//nth-child(n)匹配元素下指定索引的行
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});

隐藏一列

$('#table1 tr td::nth-child(3)').hide();

删除指定行

// 删除除第一行外的所有行
$('#table1 tr:not(:first)').remove();
// 删除指定行
$('#table1 tr:eq(3)').remove();

删除列

//删除指定列意外的列
$('#table1 tr td:not(:nth-child(n))').remove();
// 删除指定列
$('#table1 tr td::nth-child(n)').remove();

全选或全不选

//方法一
$('#all').on('click', function () { 
    //prop()获取在匹配的元素集中的第一个元素的属性值。
	// 给当前一起绑定的子选择添加效果
    $('input.checkSub').prop('checked', this.checked); 
});
//方法二:
//此传入的参数为this 如:checkAll(this)
function checkAll(evt){
 var tbl=$("#table1");
 var trlist=tbl.find("tr");
 for(var i=1;i<trlist.length;i++){
  var tr=$(trlist[i]);
  var input=tr.find("INPUT[type='checkbox']");
  //设置属性checkred
  input.attr("checked",evt.checked);
 }
}
//方法三:
//此传入的参数为this 如:checkAll(this)
function checkAll(evt){
    $("#table1 tr").find("input[type='checkbox']").each(function(i){
     $(this).attr("checked",evt.checked)
    });
}
//方法四:
//此传入的参数为this 如:checkAll(this)
function checkAll(evt){
    $("#table1 tr").find("input[type='checkbox']")
	.attr("checked",evt.checked);
}

Jquery对表格操作技巧大汇总

© 著作权归作者所有

共有 人打赏支持
米线爱上烧饼
粉丝 0
博文 3
码字总数 3515
作品 0
贵阳
程序员
jQuery对表单、表格的操作及更多的应用

jQuery对表单、表格的操作及更多的应用 1 表单应用 一个表单有3个基本组成部分。 (1) 表单标签:包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法 (2) 表单域:包含文本...

zhangda89
2011/10/07
0
0
改善你的jQuery的25个步骤

从Google Code加载jQuery Google Code上已经托管了多种JavaScript类库,从Google Code上加载jQuery比直接从你的服务器加载更有优势。它节省了你服务器上的带宽,能够很快的从Google的内容分布...

ddtt
2011/12/29
0
1
Visual Studio下使用jQuery的10个技巧

【51CTO经典译文】广泛流行的jQuery是一个开源的,跨浏览器和兼容CSS 3的JavaScript库,你可以用它简化你的JavaScript编码任务和操作(添加,编辑和删除)HTML内容中的DOM元素,本文介绍10个...

晨曦之光
2012/03/09
0
0
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6
jquery的一些用法 有用的用法。

AJAX 框架 用Asp.net ajax 还是 Jquery? AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NETAJAX 并不包括在 AJAX 框架之中。 刚开始学了 JQuqery,众多的 $g...

雪中漫步
2010/03/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

五大云原生技术

云原生(Cloud-Native)是一种文化,更是一种潮流,它是云计算的一个必然导向,是让云成为云化战略成功的基石。云计算时代,云原生技术注定将对现代化应用的建设、交付与运维产生颠覆性的影响...

问题终结者
2分钟前
0
0
Android JNI开发系列(十二) JNI局部引用、全局引用和弱全局引用

JNI 局部引用、全局引用和弱全局引用 在JNI规范中定义了三种引用:局部引用(Local Reference)、全局引用(Global Reference)、弱全局引用(Weak Global Reference)。区别如下: 局部引用...

蔡小鹏
3分钟前
0
0
Android 实现类似考试座号表效果

类似于这种效果 1,新建一个Student类,用户添加学生信息 private int icon; private String name; private int age; private String sex ; private int id; publ...

lanyu96
9分钟前
0
0
聊聊storm的CustomStreamGrouping

序 本文主要研究一下storm的CustomStreamGrouping CustomStreamGrouping storm-2.0.0/storm-client/src/jvm/org/apache/storm/grouping/CustomStreamGrouping.java public interface CustomS......

go4it
18分钟前
1
0
编程中的各种闲谈

service 是否一定要定义 interface 在学习ssh(spring, struts2, hibernate)时,老师教在 service 层要定义接口,再去实现此接口,方便解耦。 在 spring 框架中,自身定义了很多接口,并且有不...

seal_90
19分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部