一个JQuery操作Table的代码分享

206 阅读 0 评论 136 点赞

我是靠谱客的博主机灵小天鹅，最近开发中收集的这篇文章主要介绍一个JQuery操作Table的代码分享，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
一、数据准备 
<table id="table1"> 
<tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>操作</th></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
</table> 
<table id="table2"> 
<tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
</table> 
<table id="table3"> 
<thead> 
<tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr> 
</thead> 
<tbody> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
</tbody> 
</table> 
<table id="table4"> 
<thead> 
<tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr> 
</thead> 
<tbody> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试3</td><td>测试</td><td>测试</td><td>测试</td></tr> 
</tbody> 
</table> 
二、操作 
<script type="text/javascript"> 
//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后插入一行 
$("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)")); 
</script> 