項目中一個新的需求，需要用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就不貼出來了
簡單的效果圖如下
