JQuery操作表(table)

一.数据准备  

1. <table id="table1">  
2. <tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>操作</th></tr>  
3. <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
4. <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
5. <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
6. </table>  

1. <table id="table2">  
2. <tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr>  
3. <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
4. <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
5. <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
6. </table>  

1. <table id="table3">  
2. <thead>  
3. <tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr>  
4. </thead>  
5. <tbody>  
6. <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
7. <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
8. <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
9. </tbody>  
10. </table>  

1. <table id="table4">  
2. <thead>  
3. <tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr>  
4. </thead>  
5. <tbody>  
6. <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
7. <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
8. <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
9. <tr><td>测试3</td><td>测试</td><td>测试</td><td>测试</td></tr>  
10. </tbody>  
11. </table>  

二、操作 

1.鼠标移动行变色

1. $("#table1 tr").hover(function(){  
2.     $(this).children("td").addClass("hover")  
3. },function(){  
4.     $(this).children("td").removeClass("hover")  
5. })  

1. $("#table2 tr:gt(0)").hover(function() {  
2.     $(this).children("td").addClass("hover");  
3. }, function() {  
4.     $(this).children("td").removeClass("hover");  
5. });  

2.奇偶行不同颜色 

1. $("#table3 tbody tr:odd").css("background-color", "#bbf");  
2. $("#table3 tbody tr:even").css("background-color","#ffc");   

1. $("#table3 tbody tr:odd").addClass("odd")  
2. $("#table3 tbody tr:even").addClass("even")  

3.隐藏一行

1. $("#table3 tbody tr:eq(3)").hide();  

4.隐藏一列

1. $("#table5 tr td::nth-child(3)").hide();  

1. $("#table5 tr").each(function(){$("td:eq(3)",this).hide()});   

5.删除一行 

1. // 删除除第一行外的所有行  
2. $("#table6 tr:not(:first)").remove();  

6.删除一列 

1. // 删除除第一列外的所有列  
2. $("#table6 tr td:not(:nth-child(1))").remove();  

 7.得到（设置）某个单元格的值

 

1. //设置table7,第2个tr的第一个td的值。    
2. $("#table7 tr:eq(1) td:nth-child(1)").html("value");    
3. //获取table7,第2个tr的第一个td的值。    
4. $("#table7 tr:eq(1) td:nth-child(1)").html();   

8.插入一行：

 

 

1. //在第二个tr后插入一行  
2. $("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)"));