HtmlTable表格编辑（添加删除⾏，单元格）项⽬中⼀个新的需求，需要⽤js来编辑⼀个表格，包括添加⼀⾏，删除⼀⾏，添加⼀个单元格，删除⼀个单元格
注：⽰例代码不包括删除列和添加列
下⾯是js
1 <script>
2 function addover(div) {
3 $(div).html("+");
4 }
5 function addout(div) {
6 $(div).html(" ");
7 }
8 function cutover(div) {
9 $(div).html("-");
10 }
11 function cutout(div) {
12 $(div).html(" ");
13 }
14//添加类别
15 function typeAdd(div) {
16var tr = $(div).parents("tr"); //获取当前⾏的Tr
17/*设置⽉份⾏数+1*/
18//findFather(tr);
19var monthtd = findFather(tr); //获取当前⾏的⽉份TD
20var monthtdSpan = monthtd.attr("rowspan"); //获取当前⾏的⽉份的TD数
21 monthtd.attr("rowspan", parseInt(monthtdSpan) + 1); //⽉份的TD数+1
22/*添加⼀⾏空⾏*/
23var newtr = ateElement("tr");
24var newtrHtml = '<td rowspan="1">' +
25'<div class="typeadd" onmouseover="addover(this)" onclick="typeAdd(this)" onmouseout="addout(this)"> </div>' +
26'<div class="typename">⽆</div>' +
27'<div class="typecut" onmouseover="cutover(this)" onclick="typeCut(this)" onmouseout="cutout(this)"> </div>' +
28'</td>' +
29'<td>' +
30'<div class="contentadd" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div>' +
31'<div class="content">⽆</div>' +
32'<div class="contentcut" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div>' +
33'</td>' +
34'<td>' +
35'<div class="contentadd_" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div>' +
36'<div class="content_">⽆</div>' +
37'<div class="contentcut_" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div>' +
38'</td>';
39 $(newtr).html(newtrHtml);
40 tr = findNextFather(tr);
41 $(newtr).insertBefore(tr);
42 }
43//类别移除
44 function typeCut(div) {
45if (!confirm("移除此单元会导致后续单元全部移除，是否移除？")) {
46return false;
47 }
48var tr = $(div).parents("tr"); //获取当前⾏的Tr
49var firstTd = tr.find("td").eq(0);
50//如果没有⽉份列，则移除
51if (firstTd.html().indexOf("⽉份") == -1) {
52var rows = parseInt(firstTd.attr("rowspan"));
53for (var i = 1; i < rows; i++) {
54 tr.next().remove();
55 }
56var ftd = $(findFather(tr));
57//alert(ftd.attr("rowspan"));
58var frows = parseInt(ftd.attr("rowspan")) - rows;
59//alert(frows);
60 ftd.attr("rowspan", frows);
61 tr.remove();
62 } else {
63//如果有⽉份列，则提取⽉份列，添加到下⼀个
64var secondTd = tr.find("td").eq(1);
65var frows = parseInt(firstTd.attr("rowspan"));//⽉份⾏数
66var rows = parseInt(secondTd.attr("rowspan")); //类⾏数
67if (frows == rows) {
68 alert("次类为当⽉唯⼀类别，⽆法删除");
69 } else {
70var newfirtstTd = firstTd;
71var nextTr = findtypeFatherNext(tr);
72//alert(nextTr.html());
73var nextTr_firstTd = $(nextTr).find("td").eq(0);
74//alert(nextTr_firstTd.html());
75 $(newfirtstTd).insertBefore(nextTr_firstTd);
76 newfirtstTd.attr("rowspan", frows - rows);
77for (var i = 1; i < rows; i++) {
78 tr.next().remove()
79 }
80 tr.remove();
81 }
82 }
83 }
84//添加计划
85 function contentAdd(div) {
86var tr = $(div).parents("tr"); //获取当前⾏的Tr
87/*设置⽉份⾏数+1*/
88var monthtd = findFather(tr); //获取当前⾏的⽉份TD
89var monthtdSpan = monthtd.attr("rowspan"); //获取当前⾏的⽉份的TD数
90 monthtd.attr("rowspan", parseInt(monthtdSpan) + 1); //⽉份的TD数+1
91/*设置类型⾏数+1*/
92var typetd = findtypeFather(tr);
93var typetdSpan = typetd.attr("rowspan"); //获取当前⾏的类型的TD数
94 typetd.attr("rowspan", parseInt(typetdSpan) + 1); //类型的TD数+1
95/*添加⼀⾏空⾏*/
96var newtr = ateElement("tr");
97var newtrHtml = '<td>' +
98'<div class="contentadd" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div>' +
99'<div class="content">⽆</div>' +
100'<div class="contentcut" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div>' +
101'</td>' +
102'<td>' +
103'<div class="contentadd_" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout
="addout(this)"> </div>' +
104'<div class="content_">⽆</div>' +
105'<div class="contentcut_" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div>' +
106'</td>';
107 $(newtr).html(newtrHtml);
108 $(newtr).insertAfter(tr);
109 }
110//移除计划
111 function contentCut(div) {
112var tr = $(div).parents("tr"); //获取当前⾏的Tr
113if (tr.find("td").eq(0).html().indexOf("typename") != -1) {
114 alert("此单元⽆法移除，请移除上级单元");
115 } else if (tr.find("td").eq(0).html().indexOf("⽆")==-1) {
116 alert("此单元⽆法移除，请移除上级单元");
117 } else if (tr.find("td").eq(0).html().indexOf("⽉份") != -1) {
118 alert("此单元⽆法移除，请移除上级单元");
119 } else {
120/*设置⽉份⾏数+1*/
121var monthtd = findFather(tr); //获取当前⾏的⽉份TD
122var monthtdSpan = monthtd.attr("rowspan"); //获取当前⾏的⽉份的TD数
123 monthtd.attr("rowspan", parseInt(monthtdSpan) - 1); //⽉份的TD数+1
124/*设置类型⾏数+1*/
125var typetd = findtypeFather(tr);
126var typetdSpan = typetd.attr("rowspan"); //获取当前⾏的类型的TD数
127 typetd.attr("rowspan", parseInt(typetdSpan) - 1); //类型的TD数+1
128 tr.remove();
129 }
130 }
131
html表格元素132//递归获取下⼀个⽬标TR
133 function findNextFather(tr) {
134var tr = $(tr).next();
135if (tr.html().indexOf("typename") != -1) {
136return tr;
137 } else if (tr.html().indexOf("⽉份") != -1) {
138return tr;
139 } else {
140return findNextFather(tr);
141 }
142 }
143//递归获取上⼀个⽉份列
144 function findFather(tr) {
145//获取当前TR下的第⼀个TD
146var monthtd = tr.find("td").eq(0);
147//如果不包含"⽉份"关键字
148if (monthtd.html().indexOf("⽉份") == -1) {
149 tr = $(tr).prev(); //向上推⼀个TR
150return findFather(tr);//传⼊
151 } else {
152return monthtd;
153 }
154 }
155//递归获取上⼀个类型列
156 function findtypeFather(tr) {
157//获取当前TR下的第⼀个TD
158var typetd = tr.find("td").eq(0);
159if (typetd.html().indexOf("⽉份") != -1) {
160return tr.find("td").eq(1);
161 } else if (typetd.html().indexOf("typename") == -1) {
162 tr = $(tr).prev(); //向上推⼀个TR
163return findtypeFather(tr); //传⼊
164 } else {
165return typetd;
166 }
167 }
168//递归获取下⼀个类型列
169 function findtypeFatherNext(tr) {
170//获取当前TR下的第⼀个TD
171 tr = tr.next();
172var typetd = tr.find("td").eq(0);
173if (typetd.html().indexOf("typename") != -1) {
174return tr;
175 } else {
176return findtypeFatherNext(tr);
177 }
178 }
179 </script>
⼀下是HTML代码
1 <table class="FormTable">
2 <thead>
3 <tr>
4 <td >⽉份</td>
5 <td >类别</td>
6 <td >护理部</td>
7 <td >⼤科</td>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <td rowspan="1">⼀⽉份</td>
13 <td rowspan="1">
14 <div class="typeadd" onmouseover="addover(this)" onclick="typeAdd(this)" onmouseout="addout(this)"> </div>
15 <div class="typename">⽆</div>
16 <div class="typecut" onmouseover="cutover(this)" onclick="typeCut(this)" onmouseout="cutout(this)"> </div>
17 </td>
18 <td>
19 <div class="contentadd" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div>
20 <div class="content">⽆</div>
21 <div class="contentcut" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div>
22 </td>
23 <td>
24 <div class="contentadd_" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div>
25 <div class="content_">⽆</div>
26 <div class="contentcut_" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div>
27 </td>
28 </tr>
29 <tr>
30 <td rowspan="1">⼆⽉份</td>
31 <td rowspan="1">
32 <div class="typeadd" onmouseover="addover(this)" onclick="typeAdd(this)" onmouseout="addout(this)"> </div>
33 <div class="typename">⽆</div>
34 <div class="typecut" onmouseover="cutover(this)" onclick="typeCut(this)" onmouseout="cutout(this)"> </div>
35 </td>
36 <td>
37 <div class="contentadd" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div>
38 <div class="content">⽆</div>
39 <div class="contentcut" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div>
40 </td>
41 <td>
42 <div class="contentadd_" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div>
43 <div class="content_">⽆</div>
44 <div class="contentcut_" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div>
45 </td>
46 </tr>
47 <tr>
48 <td rowspan="1">三⽉份</td>
49 <td rowspan="1">
50 <div class="typeadd" onmouseover="addover(this)" onclick="typeAdd(this)" onmouseout="addout(this)"> </div>
51 <div class="typename">⽆</div>
52 <div class="typecut" onmouseover="cutover(this)" onclick="typeCut(this)" onmouseout="cutout(this)"> </div>
53 </td>
54 <td>
55 <div class="contentadd" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div>
56 <div class="content">⽆</div>
57 <div class="contentcut" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div>
58 </td>
59 <td>
60 <div class="contentadd_" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div>
61 <div class="content_">⽆</div>
62 <div class="contentcut_" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div>
63 </td>
64 </tr>
65 <tr>
66 <td rowspan="1">四⽉份</td>
67 <td rowspan="1">
68 <div class="typeadd" onmouseover="addover(this)" onclick="typeAdd(this)" onmouseout="addout(this)"> </div>
69 <div class="typename">⽆</div>
70 <div class="typecut" onmouseover="cutover(this)" onclick="typeCut(this)" onmouseout="cutout(this)"> </div>
71 </td>
72 <td>
73 <div class="contentadd" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div>
74 <div class="content">⽆</div>
75 <div class="contentcut" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div>
76 </td>
77 <td>
78 <div class="contentadd_" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div>
79 <div class="content_">⽆</div>
80 <div class="contentcut_" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div>
81 </td>
82 </tr>
83 <tr>
84 <td rowspan="1">五⽉份</td>
85 <td rowspan="1">
86 <div class="typeadd" onmouseover="addover(this)" onclick="typeAdd(this)" onmouseout="addout(this)"> </div>
87 <div class="typename">⽆</div>
88 <div class="typecut" onmouseover="cutover(this)" onclick="typeCut(this)" onmouseout="cutout(this)"> </div>
89 </td>
90 <td>
91 <div class="contentadd" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div>
92 <div class="content">⽆</div>
93 <div class="contentcut" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div>
94 </td>
95 <td>
96 <div class="contentadd_" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div>
97 <div class="content_">⽆</div>
98 <div class="contentcut_" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div>
99 </td>
100 </tr>
101 <tr>
102 <td rowspan="1">六⽉份</td>
103 <td rowspan="1">
104 <div class="typeadd" onmouseover="addover(this)" onclick="typeAdd(this)" onmouseout="addout(this)"> </div>
105 <div class="typename">⽆</div>
106 <div class="typecut" onmouseover="cutover(this)" onclick="typeCut(this)" onmouseout="cutout(this)"> </div>
107 </td>
108 <td>
109 <div class="contentadd" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div> 110 <div class="content">⽆</div>
111 <div class="contentcut" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div> 112 </td>
113 <td>
114 <div class="contentadd_" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div> 115 <div class="content_">⽆</div>
116 <div class="contentcut_" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div> 117 </td>
118 </tr>
119 <tr>
120 <td rowspan="1">七⽉份</td>
121 <td rowspan="1">
122 <div class="typeadd" onmouseover="addover(this)" onclick="typeAdd(this)" onmouseout="addout(this)"> </div>
123 <div class="typename">⽆</div>
124 <div class="typecut" onmouseover="cutover(this)" onclick="typeCut(this)" onmouseout="cutout(this)"> </div>
125 </td>
126 <td>
127 <div class="contentadd" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div> 128 <div class="content">⽆</div>
129 <div class="contentcut" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div> 130 </td>
131 <td>
132 <div class="contentadd_" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div> 133 <div class="content_">⽆</div>
134 <div class="contentcut_" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div> 135 </td>
136 </tr>
137 <tr>
138 <td rowspan="1">⼋⽉份</td>
139 <td rowspan="1">
140 <div class="typeadd" onmouseover="addover(this)" onclick="typeAdd(this)" onmouseout="addout(this)"> </div>
141 <div class="typename">⽆</div>
142 <div class="typecut" onmouseover="cutover(this)" onclick="typeCut(this)" onmouseout="cutout(this)"> </div>
143 </td>
144 <td>
145 <div class="contentadd" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div> 146 <div class="content">⽆</div>
147 <div class="contentcut" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div> 148 </td>
149 <td>
150 <div class="contentadd_" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div> 151 <div class="content_">⽆</div>
152 <div class="contentcut_" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div> 153 </td>
154 </tr>
155 <tr>
156 <td rowspan="1">九⽉份</td>
157 <td rowspan="1">
158 <div class="typeadd" onmouseover="addover(this)" onclick="typeAdd(this)" onmouseout="addout(this)"> </div>
159 <div class="typename">⽆</div>
160 <div class="typecut" onmouseover="cutover(this)" onclick="typeCut(this)" onmouseout="cutout(this)"> </div>
161 </td>
162 <td>
163 <div class="contentadd" onmouseover="addover(this)" onclick="contentAdd(this)"
onmouseout="addout(this)"> </div> 164 <div class="content">⽆</div>
165 <div class="contentcut" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div> 166 </td>
167 <td>
168 <div class="contentadd_" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div> 169 <div class="content_">⽆</div>
170 <div class="contentcut_" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div> 171 </td>
172 </tr>
173 <tr>
174 <td rowspan="1">⼗⽉份</td>
175 <td rowspan="1">
176 <div class="typeadd" onmouseover="addover(this)" onclick="typeAdd(this)" onmouseout="addout(this)"> </div>
177 <div class="typename">⽆</div>
178 <div class="typecut" onmouseover="cutover(this)" onclick="typeCut(this)" onmouseout="cutout(this)"> </div>
179 </td>
180 <td>
181 <div class="contentadd" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div> 182 <div class="content">⽆</div>
183 <div class="contentcut" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div> 184 </td>
185 <td>
186 <div class="contentadd_" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div> 187 <div class="content_">⽆</div>
188 <div class="contentcut_" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div> 189 </td>
190 </tr>
191 <tr>
192 <td rowspan="1">⼗⼀⽉份</td>
193 <td rowspan="1">
194 <div class="typeadd" onmouseover="addover(this)" onclick="typeAdd(this)" onmouseout="addout(this)"> </div>
195 <div class="typename">⽆</div>
196 <div class="typecut" onmouseover="cutover(this)" onclick="typeCut(this)" onmouseout="cutout(this)"> </div>
197 </td>
198 <td>
199 <div class="contentadd" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div> 200 <div class="content">⽆</div>
201 <div class="contentcut" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div> 202 </td>
203 <td>
204 <div class="contentadd_" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div> 205 <div class="content_">⽆</div>
206 <div class="contentcut_" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div> 207 </td>
208 </tr>
209 <tr>
210 <td rowspan="1">⼗⼆⽉份</td>
211 <td rowspan="1">
212 <div class="typeadd" onmouseover="addover(this)" onclick="typeAdd(this)" onmouseout="addout(this)"> </div>
213 <div class="typename">⽆</div>
214 <div class="typecut" onmouseover="cutover(this)" onclick="typeCut(this)" onmouseout="cutout(this)"> </div>
215 </td>
216 <td>
217 <div class="contentadd" onmouseover="addover(this)" onclick="contentAdd(this)"
onmouseout="addout(this)"> </div> 218 <div class="content">⽆</div>
219 <div class="contentcut" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div> 220 </td>
221 <td>
222 <div class="contentadd_" onmouseover="addover(this)" onclick="contentAdd(this)" onmouseout="addout(this)"> </div> 223 <div class="content_">⽆</div>
224 <div class="contentcut_" onmouseover="cutover(this)" onclick="contentCut(this)" onmouseout="cutout(this)"> </div> 225 </td>
226 </tr>
227 </tbody>
228 </table>
样式：
1 .typeadd
2 {
3float:left;width:6%;
4 }
5 .typeadd:hover
6 {
7 background-color:#ccc;
8 cursor:pointer;
9 }
10 .typecut
11 {
12float:left;width:6%;
13 }
14 .typecut:hover
15 {
16 background-color:#ccc;
17 cursor:pointer;
18 }
19 .contentadd
20 {
21float:left;width:6%;
22 }
23 .contentadd:hover
24 {
25 background-color:#ccc;
26 cursor:pointer;
27 }
28 .contentcut
29 {
30float:left;width:6%;
31 }
32 .contentcut:hover
33 {
34 background-color:#ccc;
35 cursor:pointer;
36 }
37 .contentadd_
38 {
39float:left;width:6%;
40 }
41 .contentadd_:hover
42 {
43 background-color:#ccc;
44 cursor:pointer;
45 }
46 .contentcut_
47 {
48float:left;width:6%;
49 }
50 .contentcut_:hover
51 {
52 background-color:#ccc;
53 cursor:pointer;
54 }
55 .typename
56 {
57float:left;width: 88%;
58 }
59 .content
60 {
61float:left;width: 88%;
62 }
63 .content_
64 {
65float:left;width: 88%;
66 }
外链jquery1.7.1另外还有个外链css就不贴出来了简单的效果图如下
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论