复制代码 代码如下: 一、数据准备 <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>

　　推荐阅读

　　深入分析js中的constructor和prototype

我们在定义函数的时候，函数定义的时候函数本身就会默认有一个prototype的属性，而我们如果用new 运算符来生成一个对象的时候就没有prototype属性。我们来看一个例子，来说明这个 复制代码 代码如下: function a(c>>>详细阅读

本文标题：一个JQuery操作Table的代码分享

地址：http://www.17bianji.com/kaifa2/JS/23507.html

 1/2    1