复制代码 代码如下:

一、数据准备

<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>

【一个JQuery操作Table的代码分享】相关文章：

★ jQuery封装的tab选项卡插件分享

★ JS中的Replace方法使用经验分享

★ JQuery控制Radio选中方法分析

★ AspNet中使用JQuery boxy插件的确认框

★ JQuery中DOM事件冒泡实例分析

★ 7个有用的jQuery代码片段分享

★ 一段实时更新的时间代码

★ 手机开发必备技巧：javascript及CSS功能代码分享

★ Javascript随机显示图片的源代码

★ javascript中createElement的两种创建方式