文档章节

JQuery之表格常见操作技巧

米线爱上烧饼
 米线爱上烧饼
发布于 2016/06/11 23:52
字数 394
阅读 16
收藏 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的25个步骤

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

ddtt
2011/12/29
230
1
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.8K
1
jQuery对表单、表格的操作及更多的应用

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

zhangda89
2011/10/07
426
0
jquery技巧总结

一、简介 1.1、概述 随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等,通过将...

晨曦之光
2012/03/09
204
0
jQuery 表格工具集

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

红薯
2010/04/15
9.5K
10

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
今天
12
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
今天
7
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
今天
8
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
今天
11
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部