文档章节

jquery对table表格的常用操作

 学习也休闲
发布于 2016/03/28 16:01
字数 576
阅读 155
收藏 6

一、删除行


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


二、删除一列

 

//删除除第一列外的所有列 
$("#table1 tr th:not(:nth-child(1))").remove();
$("#table1 tr td:not(:nth-child(1))").remove();
//删除第一列
$("#table1 tr td::nth-child(1)").remove();


三、得到(设置)某个单元格的值

 

//设置table1,第2个tr的第一个td的值。 
$("#table1 tr:eq(1) td:nth-child(1)").html("value"); 
//获取table1,第2个tr的第一个td的值。 
$("#table1 tr:eq(1) td:nth-child(1)").html();


四、全选或全不选

 

 
//方法一:
//全选或全不选 此传入的参数为event 如:checkAll(event)
 function checkAll(evt)
 {
 evt=evt?evt:window.event;
 var chall=evt.target?evt.target:evt.srcElement;
 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']");
 input.attr("checked",chall.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']");
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);
}


五、插入新行

 

//在表格最后的位置
var newRow = "<tr style=\\"background:red;\\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";
$("#table3 tr:last").after(newRow);


//在第二行之后插入
var newRow = "<tr style=\\"background:red;\\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";
$("#table3 tr:eq(1)").after(newRow);



六、合并行单元格


//合并 第二行第二个和第三个单元格
$("#table3 tr:eq(1) td:eq(1)").attr("colspan", 2);
$("#table3 tr:eq(1) td:eq(2)").remove();


七、拆分行单元格

 

$("#table3 tr:eq(1) td:eq(1)").attr("colspan", 1);
$("#table3 tr:eq(1) td:eq(1)").after("<td>第二行第三列</td>")


八、表格奇偶行变色

 

$(document).ready(function (){
    //奇偶行不同颜色
    $("#table2 tbody tr:odd").addClass("odd"),
    $("#table2 tbody tr:even").addClass("even")

    //或者
    //$("#table2 tbody tr:odd").css("background-color", "#bbf"),
    //$("#table2 tbody tr:even").css("background-color", "#ffc")
});


参考资料:jquery对table表格的常用操作  http://www.studyofnet.com/news/1177.html


© 著作权归作者所有

粉丝 6
博文 99
码字总数 38516
作品 0
海淀
私信 提问
15款提高表格操作的jQuery插件

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

鉴客
2010/08/12
5.8K
1
jQuery 表格工具集

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

红薯
2010/04/15
9.5K
10
jquery表格

新闻来源:noupe.com 本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行...

长平狐
2012/10/16
496
1
jQuery 表格插件汇总

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

晨曦之光
2012/03/09
382
0
28个有用的表格插件推荐

OSCHINA曾发布过文章“18个最好的 jQuery 表格插件”,今天再提供一份表格插件的长名单。 28个表格插件,列表如下: Table Sorter Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的...

小卒过河
2011/07/01
4.5K
9

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部