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>

 

二、操作

 

 

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)"));    

 

 

 

 

转自：http://www.it118.org/Specials/342c8f06-27b9-4791-a663-646cb502cf6c/28d9d3b5-4373-44b3-953c-4705834a503b.htm