首页 > 代码库 > 4、jquery表格操作
4、jquery表格操作
1.<html>
2.<head>
3.<title>jquery表格操作</title>
4.<script language="javascript" src="http://www.mamicode.com/jquery.table.tr.js"></script>
5.</head>
6.<body>
7. <a href="http://www.mamicode.com/#" onclick="add_line();">添加一行</a>
8. <a href="http://www.mamicode.com/#" onclick="remove_line();">删除一行</a>
9. <a href="http://www.mamicode.com/#" onclick="up_exchange_line();">上移</a>
10. <a href="http://www.mamicode.com/#" onclick="down_exchange_line();">下移</a>
11. <a href="http://www.mamicode.com/#" onclick="top_exchange_line();">置顶</a>
12. <a href="http://www.mamicode.com/#" onclick="hou_exchange_line();">置底</a>
13.<table>
14.<tr><td>序号</td><td>步骤名称</td><td>步骤描述</td><td>相关操作</td></tr>
15.</table>
16.<table id="content">
17.</table>
18.</body>
19.</html>
20.<script language="javascript">
21.var currentStep=0;
22.var max_line_num=0;
23.function add_line(){
24. max_line_num=$("#content tr:last-child").children("td").html();
25. if(max_line_num==null) {
26. max_line_num=1;
27. }
28. else{
29. max_line_num=parseInt(max_line_num);
30. max_line_num+=1;
31. }
32. $(‘#content‘).append("<tr id=‘line"+max_line_num+"‘ onclick=‘lineclick(this);‘><td>"+max_line_num+"</td><td>打开网页"+max_line_num+"</td><td>打开登录网页"+max_line_num+"</td><td>删除 编辑</td></tr>");
33.}
34.function remove_line(){
35. if(currentStep==0){
36. alert(‘请选择一项!‘);
37. return false;
38. }
39. $("#content tr").each(
40. function(){
41. var seq=parseInt($(this).children("td").html());
42. if(seq==currentStep) $(this).remove();
43. if(seq>currentStep) $(this).children("td").each(function(i){if(i==0)$(this).html(seq-1);});
44. }
45. );
46. currentStep=0;
47.}
48.
49.function top_exchange_line(){
50. if(currentStep==0){
51. alert(‘请选择一项!‘);
52. return false;
53. }
54. if(currentStep<=1){
55. alert(‘非法操作!‘);
56. return false;
57. }
58. var topStep = 1;
59. //修改序号
60. $(‘#line‘+topStep+" td:first-child").html(currentStep);
61. $(‘#line‘+currentStep+" td:first-child").html(topStep);
62. //取得两行的内容
63. var topContent=$(‘#line‘+topStep).html();
64. var currentContent=$(‘#line‘+currentStep).html();
65. $(‘#line‘+topStep).html(currentContent);
66. //交换当前行与首行内容
67. $(‘#line‘+currentStep).html(topContent);
68. $(‘#content tr‘).each(function(){$(this).css("background-color","#ffffff");});
69. $(‘#line‘+topStep).css("background-color","yellow");
70. currentStep=topStep;
71.}
72.
73.function hou_exchange_line(){
74. if(currentStep==0){
75. alert(‘请选择一项!‘);
76. return false;
77. }
78. if(currentStep>=max_line_num){
79. alert(‘非法操作!‘);
80. return false;
81. }
82. var nextStep=max_line_num;
83. //修改序号
84. $(‘#line‘+nextStep+" td:first-child").html(currentStep);
85. $(‘#line‘+currentStep+" td:first-child").html(nextStep);
86. //取得两行的内容
87. var nextContent=$(‘#line‘+nextStep).html();
88. var currentContent=$(‘#line‘+currentStep).html();
89. $(‘#line‘+nextStep).html(currentContent);
90. //交换当前行与尾行内容
91. $(‘#line‘+currentStep).html(nextContent);
92. $(‘#content tr‘).each(function(){$(this).css("background-color","#ffffff");});
93. $(‘#line‘+nextStep).css("background-color","yellow");
94. currentStep=nextStep;
95.}
96.
97.function up_exchange_line(){
98. if(currentStep==0){
99. alert(‘请选择一项!‘);
100. return false;
101. }
102. if(currentStep<=1){
103. alert(‘非法操作!‘);
104. return false;
105. }
106. var upStep=currentStep-1;
107. //修改序号
108. $(‘#line‘+upStep+" td:first-child").html(currentStep);
109. $(‘#line‘+currentStep+" td:first-child").html(upStep);
110. //取得两行的内容
111. var upContent=$(‘#line‘+upStep).html();
112. var currentContent=$(‘#line‘+currentStep).html();
113. $(‘#line‘+upStep).html(currentContent);
114. //交换当前行与上一行内容
115. $(‘#line‘+currentStep).html(upContent);
116. $(‘#content tr‘).each(function(){$(this).css("background-color","#ffffff");});
117. $(‘#line‘+upStep).css("background-color","yellow");
118. currentStep=upStep;
119.}
120.function down_exchange_line(){
121. if(currentStep==0){
122. alert(‘请选择一项!‘);
123. return false;
124. }
125. if(currentStep>=max_line_num){
126. alert(‘非法操作!‘);
127. return false;
128. }
129. var nextStep=parseInt(currentStep)+1;
130. //修改序号
131. $(‘#line‘+nextStep+" td:first-child").html(currentStep);
132. $(‘#line‘+currentStep+" td:first-child").html(nextStep);
133. //取得两行的内容
134. var nextContent=$(‘#line‘+nextStep).html();
135. var currentContent=$(‘#line‘+currentStep).html();
136. $(‘#line‘+nextStep).html(currentContent);
137. //交换当前行与上一行内容
138. $(‘#line‘+currentStep).html(nextContent);
139. $(‘#content tr‘).each(function(){$(this).css("background-color","#ffffff");});
140. $(‘#line‘+nextStep).css("background-color","yellow");
141. currentStep=nextStep;
142.}
143.function lineclick(line){
144. $(‘#content tr‘).each(function(){$(this).css("background-color","#ffffff");});
145. var seq=$(line).children("td").html();
146. $(line).css("background-color","yellow");
147. currentStep=seq;
148.}
149.
150.</script>