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

html] view plaincopyprint?

  1. <html> 
  2. <head> 
  3. <title>表格</title> 
  4. <styletype="text/css"> 
  5. .editText
  6. { 
  7.     border-width:1px; 
  8.     border-top-style:none; 
  9. border-left-style:none;
  10. border-right-style:none;
  11.     border-bottom-style:solid; 
  12.     border-color:#030; 
  13.     width:100%; 
  14. } 
  15. </style> 
  16. <scriptsrc="jquery-1.3.2.js"type="text/javascript"> 
  17. </script> 
  18. <scripttype="text/javascript"> 
  19. function moveUp(obj) 
  20. { 
  21.     var current=$(obj).parent().parent(); 
  22.     var prev=current.prev(); 
  23.     if(current.index()>1) 
  24.     { 
  25.         current.insertBefore(prev); 
  26.     } 
  27. } 
  28. function moveDown(obj) 
  29. { 
  30.     var current=$(obj).parent().parent(); 
  31.     var next=current.next(); 
  32.     if(next) 
  33.     { 
  34.         current.insertAfter(next); 
  35.     } 
  36. } 
  37. </script> 
  38. </head> 
  39. <body> 
  40. <tableclass="grid"width="100%"border="1"cellspacing="0"cellpadding="0"> 
  41.   <tr> 
  42.     <td>字段英文名</td> 
  43.     <td>字段中文名</td> 
  44.     <td>字段数据类型</td> 
  45.     <td>列宽</td> 
  46.     <td>是否显示</td> 
  47.     <td>是否作为查询条件</td> 
  48.     <td>调整顺序</td> 
  49.   </tr> 
  50.   <tr> 
  51.     <td>1</td> 
  52.     <td><inputtype="text"name="textfield"class="editText"id="textfield"></td> 
  53.     <td></td> 
  54.     <td><inputtype="text"name="textfield5"id="textfield5"></td> 
  55.     <td><inputtype="checkbox"name="checkbox"id="checkbox"></td> 
  56.     <td><inputtype="checkbox"name="checkbox5"id="checkbox5"></td> 
  57.     <td><ahref="javascript:void(0)"onClick="moveUp(this)">上移</a><ahref="javascript:void(0)"onClick="moveDown(this)">下移</a></td> 
  58.   </tr> 
  59.   <tr> 
  60.     <td>2</td> 
  61.     <td><inputtype="text"name="textfield2"id="textfield2"></td> 
  62.     <td></td> 
  63.     <td><inputtype="text"name="textfield6"id="textfield6"></td> 
  64.     <td><inputtype="checkbox"name="checkbox2"id="checkbox2"></td> 
  65.     <td><inputtype="checkbox"name="checkbox6"id="checkbox6"></td> 
  66.     <td><ahref="javascript:void(0)"onClick="moveUp(this)">上移</a><ahref="javascript:void(0)"onClick="moveDown(this)">下移</a></td> 
  67.   </tr> 
  68.   <tr> 
  69.     <td>3</td> 
  70.     <td><inputtype="text"name="textfield3"id="textfield3"></td> 
  71.     <td></td> 
  72.     <td><inputtype="text"name="textfield7"id="textfield7"></td> 
  73.     <td><inputtype="checkbox"name="checkbox3"id="checkbox3"></td> 
  74.     <td><inputtype="checkbox"name="checkbox7"id="checkbox7"></td> 
  75.     <td><ahref="javascript:void(0)"onClick="moveUp(this)">上移</a><ahref="javascript:void(0)"onClick="moveDown(this)">下移</a></td> 
  76.   </tr> 
  77.   <tr> 
  78.     <td>4</td> 
  79.     <td><inputtype="text"name="textfield4"id="textfield4"></td> 
  80.     <td></td> 
  81.     <td><inputtype="text"name="textfield8"id="textfield8"></td> 
  82.     <td><inputtype="checkbox"name="checkbox4"id="checkbox4"></td> 
  83.     <td><inputtype="checkbox"name="checkbox8"id="checkbox8"></td> 
  84.     <td><ahref="javascript:void(0)"onClick="moveUp(this)">上移</a><ahref="javascript:void(0)"onClick="moveDown(this)">下移</a></td> 
  85.   </tr> 
  86. </table> 
  87. </body> 
  88. </html> 
posted @ 2012-11-06 10:32  TABCDT  阅读(270)  评论(0)  编辑  收藏  举报