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