Jquery打造可以上下移动行的表格

 current.insertBefore(prev);
 current.insertAfter(next);

 

[java]  view plain  copy
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.  <head>   
  3.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4.   <title>表格</title>   
  5.   <style type="text/css">  
  6. .editText  
  7. {  
  8.     border-width:1px;  
  9.     border-top-style:none;  
  10.     border-left-style:none;  
  11.     border-right-style:none;  
  12.     border-bottom-style:solid;  
  13.     border-color:#030;  
  14.     width:100%;  
  15. }  
  16. </style>   
  17.   <script src="jquery.js" type="text/javascript">  
  18. </script>   
  19.   <script type="text/javascript">  
  20. function moveUp(obj)  
  21. {  
  22.     var current=$(obj).parent().parent();  
  23.     var prev=current.prev();  
  24.     if(current.index()>1)  
  25.     {  
  26.         current.insertBefore(prev);  
  27.     }  
  28. }  
  29. function moveDown(obj)  
  30. {  
  31.     var current=$(obj).parent().parent();  
  32.     var next=current.next();  
  33.     if(next)  
  34.     {  
  35.         current.insertAfter(next);  
  36.     }  
  37. }  
  38. </script>   
  39.  </head>   
  40.  <body>   
  41.   <table class="grid" width="100%" border="1" cellspacing="0" cellpadding="0">   
  42.    <tbody>  
  43.     <tr>   
  44.      <td>字段英文名</td>   
  45.      <td>字段中文名</td>   
  46.      <td>字段数据类型</td>   
  47.      <td>列宽</td>   
  48.      <td>是否显示</td>   
  49.      <td>是否作为查询条件</td>   
  50.      <td>调整顺序</td>   
  51.     </tr>   
  52.     <tr>   
  53.      <td>1</td>   
  54.      <td><input type="text" name="textfield" class="editText" id="textfield" /></td>   
  55.      <td> </td>   
  56.      <td><input type="text" name="textfield5" id="textfield5" /></td>   
  57.      <td><input type="checkbox" name="checkbox" id="checkbox" /></td>   
  58.      <td><input type="checkbox" name="checkbox5" id="checkbox5" /></td>   
  59.      <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>   
  60.     </tr>   
  61.     <tr>   
  62.      <td>2</td>   
  63.      <td><input type="text" name="textfield2" id="textfield2" /></td>   
  64.      <td> </td>   
  65.      <td><input type="text" name="textfield6" id="textfield6" /></td>   
  66.      <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>   
  67.      <td><input type="checkbox" name="checkbox6" id="checkbox6" /></td>   
  68.      <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>   
  69.     </tr>   
  70.     <tr>   
  71.      <td>3</td>   
  72.      <td><input type="text" name="textfield3" id="textfield3" /></td>   
  73.      <td> </td>   
  74.      <td><input type="text" name="textfield7" id="textfield7" /></td>   
  75.      <td><input type="checkbox" name="checkbox3" id="checkbox3" /></td>   
  76.      <td><input type="checkbox" name="checkbox7" id="checkbox7" /></td>   
  77.      <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>   
  78.     </tr>   
  79.     <tr>   
  80.      <td>4</td>   
  81.      <td><input type="text" name="textfield4" id="textfield4" /></td>   
  82.      <td> </td>   
  83.      <td><input type="text" name="textfield8" id="textfield8" /></td>   
  84.      <td><input type="checkbox" name="checkbox4" id="checkbox4" /></td>   
  85.      <td><input type="checkbox" name="checkbox8" id="checkbox8" /></td>   
  86.      <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>   
  87.     </tr>   
  88.    </tbody>  
  89.   </table>    
  90.  </body>  
  91. </html>  

猜你喜欢

转载自blog.csdn.net/luojishan1/article/details/78269918
今日推荐