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

Jquery打造可以上下移动行的表格
html] view plain copy print ?
1. <html>
2. <head>
3. <title>表格</title>
4. <styletype="text/css">
5. .editText
6. {
7. border-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. 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>
相关阅读:
MVC Areas的使用
 每日踩坑 2019-07-30 H5 使用 iframe 底部有白边
 C# 使用 MsieJavaScriptEngine 引擎运行JavaScript
Javascript获取value值的三种方法及注意点
 java编程(2)——servlet和Ajax异步请求的接口编程（有调用数据库的数据）
java编程（1）——servlet和Ajax异步请求的接口编程（没有调用数据库的数据）
eclipse的常用设置
 Junit4单元测试
 Java异常
 Java的抽象类和接口
原文地址：https://www.cnblogs.com/tabcdt/p/2756490.html