分類  >  Web前端 >

jquery兌現表格的上移、下移、增加、刪除

tags:    時間:2013-12-10 00:59:45
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>  

推薦閱讀文章

Bookmark the permalink ,來源:互聯網