jquery实现表格的上移、下移、增加、删除

Js代码   

1. $(function($){  
2.     //元素交换  
3.     $(".up").live('click',function(){  
4.         $(this).parent().parent().prev("tr").before($(this).parent().parent());  
5.     });  
6.     $(".down").live('click',function(){  
7.         $(this).parent().parent().next("tr").after($(this).parent().parent());  
8.     });  
9.       
10.     $(".delete").live('click',function(){  
11.         $(this).parent().parent().remove();  
12.     });  
13.       
14.     $(".add").live('click',function(){  
15.         $('<tr id="'+(i++)+'"><td>'+(i)+'</td><td><input type ="button" value="上" class="up"/><input type ="button" value="下" class="down"/><input type ="button" value="删" class="delete"/><input type ="button" value="加" class="add"/></td></tr>')  
16.         .insertAfter($(this).parent().parent());  
17.     });  
18. });  

 

Html代码   

1. <table width="100" height="100" id="table" border="1">  
2.     <tr id="1">  
3.         <td>1</td><td>  
4.         <input class="up" type="button" value="上">  
5.         <input class="down" type="button" value="下">  
6.         <input class="delete" type="button" value="删">  
7.         <input class="add" type="button" value="加">  
8.         </td>  
9.     </tr>  
10. </table>