当前位置: 编程技术>jquery
jquery操作table的实例代码
来源: 互联网 发布时间：2014-09-03
本文导语: 一、要用到的table数据 代码示例: 文章标题文章分类发布时间操作 测试测试测试测试 测试测试测试测试 测试测试测试测试 文章标题文章分类发布时间操作 测试测试测试测试 测试测试测试测试 测试测试测试测试 ...
一、要用到的table数据
代码示例:
文章标题文章分类发布时间操作
测试测试测试测试
测试测试测试测试
测试测试测试测试
文章标题文章分类发布时间操作
测试测试测试测试
测试测试测试测试
测试测试测试测试
文章标题文章分类发布时间操作
测试测试测试测试
测试测试测试测试
测试测试测试测试
文章标题文章分类发布时间操作
测试测试测试测试
测试测试测试测试
测试测试测试测试
测试3测试测试测试
二、jquery操作table的代码
代码示例:
//1.鼠标移动行变色
$("#table1 tr").hover(function(){
$(this).children("td").addClass("hover")
},function(){
$(this).children("td").removeClass("hover")
})
$("#table2 tr:gt(0)").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover");
});
//2.奇偶行不同颜色
$("#table3 tbody tr:odd").css("background-color", "#bbf");
$("#table3 tbody tr:even").css("background-color","#ffc");
$("#table3 tbody tr:odd").addClass("odd")
$("#table3 tbody tr:even").addClass("even")
//3.隐藏一行
$("#table3 tbody tr:eq(3)").hide();
//4.隐藏一列
$("#table5 tr td::nth-child(3)").hide();
$("#table5 tr").each(function(){$("td:eq(3)",this).hide()});
//5.删除一行
// 删除除第一行外的所有行
$("#table6 tr:not(:first)").remove();
//6.删除一列
// 删除除第一列外的所有列
$("#table6 tr td:not(:nth-child(1))").remove();
//7.得到（设置）某个单元格的值
//设置table7,第2个tr的第一个td的值。
$("#table7 tr:eq(1) td:nth-child(1)").html("value");
//获取table7,第2个tr的第一个td的值。
$("#table7 tr:eq(1) td:nth-child(1)").html();
//8.插入一行：
//在第二个tr后插入一行
$("插入3插入插入插入").insertAfter($("#table7 tr:eq(1)"));
您可能感兴趣的文章：
jquery获取table中内容的代码分享
jQuery操作checkbox选择(list/table)的代码分享
jquery table操作在指定行后添加新行的例子
jQuery入门-使用tablesorter插件(表格排序)
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。