Html Table表格编辑（添加删除行，单元格）
项目中一个新的需求，需要用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) { 16 var tr = $(div).parents("tr"); //获取当前行的Tr 17 /*设置月份行数+1*/ 18 //findFather(tr); 19 var monthtd = findFather(tr); //获取当前行的月份TD 20 var monthtdSpan = monthtd.attr("rowspan"); //获取当前行的月份的TD数 21 monthtd.attr("rowspan", parseInt(monthtdSpan) + 1); //月份的TD数+1 22 /*添加一行空行*/ 23 var newtr = document.createElement("tr"); 24 var 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) { 45 if (!confirm("移除此单元会导致后续单元全部移除，是否移除？")) { 46 return false; 47 } 48 var tr = $(div).parents("tr"); //获取当前行的Tr 49 var firstTd = tr.find("td").eq(0); 50 //如果没有月份列，则移除 51 if (firstTd.html().indexOf("月份") == -1) { 52 var rows = parseInt(firstTd.attr("rowspan")); 53 for (var i = 1; i < rows; i++) { 54 tr.next().remove(); 55 } 56 var ftd = $(findFather(tr)); 57 //alert(ftd.attr("rowspan")); 58 var frows = parseInt(ftd.attr("rowspan")) - rows; 59 //alert(frows); 60 ftd.attr("rowspan", frows); 61 tr.remove(); 62 } else { 63 //如果有月份列，则提取月份列，添加到下一个 64 var secondTd = tr.find("td").eq(1); 65 var frows = parseInt(firstTd.attr("rowspan"));//月份行数 66 var rows = parseInt(secondTd.attr("rowspan")); //类行数 67 if (frows == rows) { 68 alert("次类为当月唯一类别，无法删除"); 69 } else { 70 var newfirtstTd = firstTd; 71 var nextTr = findtypeFatherNext(tr); 72 //alert(nextTr.html()); 73 var nextTr_firstTd = $(nextTr).find("td").eq(0); 74 //alert(nextTr_firstTd.html()); 75 $(newfirtstTd).insertBefore(nextTr_firstTd); 76 newfirtstTd.attr("rowspan", frows - rows); 77 for (var i = 1; i < rows; i++) { 78 tr.next().remove() 79 } 80 tr.remove(); 81 } 82 } 83 } 84 //添加计划 85 function contentAdd(div) { 86 var tr = $(div).parents("tr"); //获取当前行的Tr 87 /*设置月份行数+1*/ 88 var monthtd = findFather(tr); //获取当前行的月份TD 89 var monthtdSpan = monthtd.attr("rowspan"); //获取当前行的月份的TD数 90 monthtd.attr("rowspan", parseInt(monthtdSpan) + 1); //月份的TD数+1 91 /*设置类型行数+1*/ 92 var typetd = findtypeFather(tr); 93 var typetdSpan = typetd.attr("rowspan"); //获取当前行的类型的TD数 94 typetd.attr("rowspan", parseInt(typetdSpan) + 1); //类型的TD数+1 95 /*添加一行空行*/ 96 var newtr = document.createElement("tr"); 97 var 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) { 112 var tr = $(div).parents("tr"); //获取当前行的Tr 113 if (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*/ 121 var monthtd = findFather(tr); //获取当前行的月份TD 122 var monthtdSpan = monthtd.attr("rowspan"); //获取当前行的月份的TD数 123 monthtd.attr("rowspan", parseInt(monthtdSpan) - 1); //月份的TD数+1 124 /*设置类型行数+1*/ 125 var typetd = findtypeFather(tr); 126 var typetdSpan = typetd.attr("rowspan"); //获取当前行的类型的TD数 127 typetd.attr("rowspan", parseInt(typetdSpan) - 1); //类型的TD数+1 128 tr.remove(); 129 } 130 } 131 132 //递归获取下一个目标TR 133 function findNextFather(tr) { 134 var tr = $(tr).next(); 135 if (tr.html().indexOf("typename") != -1) { 136 return tr; 137 } else if (tr.html().indexOf("月份") != -1) { 138 return tr; 139 } else { 140 return findNextFather(tr); 141 } 142 } 143 //递归获取上一个月份列 144 function findFather(tr) { 145 //获取当前TR下的第一个TD 146 var monthtd = tr.find("td").eq(0); 147 //如果不包含"月份"关键字 148 if (monthtd.html().indexOf("月份") == -1) { 149 tr = $(tr).prev(); //向上推一个TR 150 return findFather(tr);//传入 151 } else { 152 return monthtd; 153 } 154 } 155 //递归获取上一个类型列 156 function findtypeFather(tr) { 157 //获取当前TR下的第一个TD 158 var typetd = tr.find("td").eq(0); 159 if (typetd.html().indexOf("月份") != -1) { 160 return tr.find("td").eq(1); 161 } else if (typetd.html().indexOf("typename") == -1) { 162 tr = $(tr).prev(); //向上推一个TR 163 return findtypeFather(tr); //传入 164 } else { 165 return typetd; 166 } 167 } 168 //递归获取下一个类型列 169 function findtypeFatherNext(tr) { 170 //获取当前TR下的第一个TD 171 tr = tr.next(); 172 var typetd = tr.find("td").eq(0); 173 if (typetd.html().indexOf("typename") != -1) { 174 return tr; 175 } else { 176 return findtypeFatherNext(tr); 177 } 178 } 179 </script>
一下是HTML代码
1 <table class="FormTable"> 2 <thead> 3 <tr> 4 <td style="width:10%">月份</td> 5 <td style="width:10%">类别</td> 6 <td style="width:40%">护理部</td> 7 <td style="width:40%">大科</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 { 3 float:left;width:6%; 4 } 5 .typeadd:hover 6 { 7 background-color:#ccc; 8 cursor:pointer; 9 } 10 .typecut 11 { 12 float:left;width:6%; 13 } 14 .typecut:hover 15 { 16 background-color:#ccc; 17 cursor:pointer; 18 } 19 .contentadd 20 { 21 float:left;width:6%; 22 } 23 .contentadd:hover 24 { 25 background-color:#ccc; 26 cursor:pointer; 27 } 28 .contentcut 29 { 30 float:left;width:6%; 31 } 32 .contentcut:hover 33 { 34 background-color:#ccc; 35 cursor:pointer; 36 } 37 .contentadd_ 38 { 39 float:left;width:6%; 40 } 41 .contentadd_:hover 42 { 43 background-color:#ccc; 44 cursor:pointer; 45 } 46 .contentcut_ 47 { 48 float:left;width:6%; 49 } 50 .contentcut_:hover 51 { 52 background-color:#ccc; 53 cursor:pointer; 54 } 55 .typename 56 { 57 float:left;width: 88%; 58 } 59 .content 60 { 61 float:left;width: 88%; 62 } 63 .content_ 64 { 65 float:left;width: 88%; 66 }
外链jquery1.7.1另外还有个外链css就不贴出来了
简单的效果图如下
