jquery操作table
类别:Web前端 浏览量:956
时间:2016-3-20 jquery操作table
jquery操作table一、删除行
//删除除第一行外的所有行
$("#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();
四、获取每一行指定的单元格的值
var arr = [];
$("#table1 tr td:nth-child(1)").each(function (key, value) {
arr.push($(this).html());
});
var result = arr.join(',');
五、全选或全不选
//方法一:
//全选或全不选 此传入的参数为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>")
九、合并列单元格
//合并第二列第二个单元格和第三个单元格
$("#table3 tr:eq(1) td:eq(1)").attr("rowspan", 2);
$("#table3 tr:eq(2) td:eq(1)").remove();
十、拆分列单元格
$("#table3 tr:eq(1) td:eq(1)").attr("rowspan", 1);
//在下面行第一个单元格后插入单元格
$("#table3 tr:eq(2) td:eq(0)").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")
});
十二、鼠标移动到行更换背景色
$(document).ready(function () {
//鼠标移动到行变色,单独建立css类hover
//tr:gt(0):表示获取大于 tr index 为0 的所有tr,即不包括表头
$("#table1 tr:gt(0)").hover(
function () { $(this).addClass("hover") },
function () { $(this).removeClass("hover") })
});
标签:jquery
您可能感兴趣
- jQuery多个版本间,以及与其他js文件冲突的解决方法
- jquery deferred对象
- jquery unbind
- jqueryajax实现部分刷新(php+jQuery ajax实现的实时刷新显示数据功能示例)
- jquery中append和appendto的区别
- jQuery邮箱自动补全
- Jquery中的offset()和position()的区别
- html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)
- jQuery toggleClass
- jquery如何实现倒计时
- 如何用jquery进行表单验证(jQuery实现发送验证码控制按钮禁用功能)
- jQuery 右侧浮动导航菜单
- jquery中one()的用法
- jquery左右选择框
- jquery五子棋javascript(原生JavaScript实现简单五子棋游戏)
- jquery 增加表格(jquery实现表格无缝滚动)
- 元宵晚会槽点多,芒果台上来就假唱,岳云鹏不说相声改评书了(元宵晚会槽点多)
- 岳云鹏跟凤凰传奇谈心,说出了人生中最重要的三个人,这才成功(岳云鹏跟凤凰传奇谈心)
- 爱情可以当饭吃吗(爱情能当饭吃吗)
- Top 3 JSHS《运动与健康科学 英文 》跻身SCI体育学期刊世界前三(Top3JSHS运动与健康科学)
- 体坛传媒LOGO全新升级,多元发展迈出坚实步伐(体坛传媒LOGO全新升级)
- 超撩人治愈的绝美水彩,原来出自她之手 一笔一画令无数人沉醉(超撩人治愈的绝美水彩)
热门推荐
- 云服务器怎么设置端口映射(云服务器怎么修改远程端口)
- jquery弹出窗口过渡效果(jQuery实现大屏滚动播放效果)
- MySQL中interactive_timeout和wait_timeout
- dedecms点击量(dedecms生成速度超级优化攻略 从50秒20页到0.72秒20页)
- innodb和myisam(Mysql InnoDB和MyISAM区别原理解析)
- 如何建立ftp服务器(FTP是什么?如何搭建FTP服务器?)
- mysql分页查询有几种(MySQL 查询的排序、分页相关)
- dedecms路径设置(dedecms V5.7修改表前缀的方法及出现不显示文章内容的解决方法)
- 简单的肖特基二极管电路(两个元祖T1='a', 'b',T2='c', 'd'使用匿名函数将其)
- MVC中获取当前action、controller