使用js合并table中的单元格
用primefaces做的报表，领导要求合并相同内容的单元格，但是primefaces没有找到可以合并单元格的组件，想来想去，只有页面加载后用js合并了。
http://blog.csdn.net/dengsilinming/article/details/8028490#html 这位老兄给出了例子，只做了少量改动就写出了适合自己的代码，感谢这位老兄。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <meta http-equiv="pragma" content="no-cache"> 6 <meta http-equiv="cache-control" content="no-cache"> 7 <meta http-equiv="expires" content="0"> 8 <title>评价信息详情</title> 9 <script type="text/javascript"> 10 window.onload = function(){fixRowspan([0,1]);}//页面加载完成执行js函数 11 function fixRowspan(arr) { 12 var tb = document.getElementById("appraiseDetailBean"); 13 //var arr = [0,1];//对第一列和第二列进行合并 14 arr.sort(function(a,b){return a<b?1:-1});//从大到小排序,以便先合并后面的列，再合并前面的列 15 for(var j=0;j<arr.length;j++){ 16 var x = arr[j]; 17 var row_span_num = 1; 18 var pre_row_value = ""; 19 var pre_row_obj; 20 for ( var i = 1; i < tb.rows.length; i++) { 21 var cur_row_value = tb.rows[i].cells[x].innerHTML; 22 if(pre_row_value == ""){//上一个单元格为空 23 pre_row_obj = tb.rows[i].cells[x]; 24 pre_row_value = cur_row_value; 25 }else if(pre_row_value == cur_row_value){//与上一个单元格相等 26 tb.rows[i].deleteCell(x); 27 row_span_num++; 28 if (i == tb.rows.length-1) {//如果最后一个单元格与上一个单元格相等 29 pre_row_obj.setAttribute("rowSpan", row_span_num); 30 } 31 }else{//与上一个单元格不等 32 pre_row_obj.setAttribute("rowSpan", row_span_num); 33 row_span_num = 1; 34 pre_row_obj = tb.rows[i].cells[x]; 35 pre_row_value = cur_row_value; 36 } 37 } 38 } 39 } 40 </script> 41 <style> 42 td,th{border:solid #add9c0; border-width:0px 1px 1px 0px; padding-left:10px;} 43 table{border:solid #add9c0; border-width:1px 0px 0px 1px;} 44 </style> 45 </head> 46 <body> 47 <form action="XXX" method="post" target="mainWorkArea"> 48 <fieldset> 49 <legend>教师评价</legend> 50 <div id="content"> 51 <table id="appraiseDetailBean"> 52 <caption>上学期-评价</caption> 53 <thead> 54 <tr> 55 <th>维 度</th> 56 <th>要 素</th> 57 <th>关 键 表 现</th> 58 <th>权重</th> 59 <th>评 价 标 准</th> 60 </tr> 61 </thead> 62 <tbody> 63 <tr class="odd"> 64 <td>运动与健康</td> 65 <td>习惯与技能</td> 66 <td>热爱体育运动，养成锻炼习惯，“两操”出勤率高，动作规范，效果好</td> 67 <td>3.00</td> 68 <td> 69 <input type="hidden" name="appraiseItemIndex1" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input> 70 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> 71 <input type="hidden" name="appraiseType" value="teacher"></input> 72 <input type="hidden" id="studentInput" name="studentNo" value=""></input> 73 <input type="hidden" name="appraiseWeight1" value="3.00"></input> 74 75 <input type="radio" id="appraiseResult1_0" name="appraiseResult1" value="A"></input> 76 <label for="appraiseResult1_0">优</label> 77 <input type="radio" id="appraiseResult1_1" name="appraiseResult1" value="B"></input> 78 <label for="appraiseResult1_1">好</label> 79 <input type="radio" id="appraiseResult1_2" name="appraiseResult1" value="C"></input> 80 <label for="appraiseResult1_2">良</label> 81 <input type="radio" id="appraiseResult1_3" name="appraiseResult1" value="D"></input> 82 <label for="appraiseResult1_3">差</label> 83 <input type="radio" id="appraiseResult1_4" name="appraiseResult1" value="E"></input> 84 <label for="appraiseResult1_4">极差</label> 85 </td> 86 </tr> 87 <tr class="even"> 88 <td>运动与健康</td> 89 <td>习惯与技能</td> 90 <td>有一定的体育爱好或特长，积极参加各项活动和竞赛，运动会主动参加</td> 91 <td>4.00</td> 92 <td> 93 <input type="hidden" name="appraiseItemIndex2" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input> 94 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> 95 <input type="hidden" name="appraiseType" value="teacher"></input> 96 <input type="hidden" id="studentInput" name="studentNo" value=""></input> 97 <input type="hidden" name="appraiseWeight2" value="4.00"></input> 98 99 <input type="radio" id="appraiseResult2_0" name="appraiseResult2" value="A"></input> 100 <label for="appraiseResult2_0">优</label> 101 <input type="radio" id="appraiseResult2_1" name="appraiseResult2" value="B"></input> 102 <label for="appraiseResult2_1">好</label> 103 <input type="radio" id="appraiseResult2_2" name="appraiseResult2" value="C"></input> 104 <label for="appraiseResult2_2">良</label> 105 <input type="radio" id="appraiseResult2_3" name="appraiseResult2" value="D"></input> 106 <label for="appraiseResult2_3">差</label> 107 <input type="radio" id="appraiseResult2_4" name="appraiseResult2" value="E"></input> 108 <label for="appraiseResult2_4">极差</label> 109 </td> 110 </tr> 111 <tr class="odd"> 112 <td>运动与健康</td> 113 <td>习惯与技能</td> 114 <td>具备一定的运动技能，体育课考查情况好</td> 115 <td>3.00</td> 116 <td> 117 <input type="hidden" name="appraiseItemIndex3" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input> 118 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> 119 <input type="hidden" name="appraiseType" value="teacher"></input> 120 <input type="hidden" id="studentInput" name="studentNo" value=""></input> 121 <input type="hidden" name="appraiseWeight3" value="3.00"></input> 122 123 <input type="radio" id="appraiseResult3_0" name="appraiseResult3" value="A"></input> 124 <label for="appraiseResult3_0">优</label> 125 <input type="radio" id="appraiseResult3_1" name="appraiseResult3" value="B"></input> 126 <label for="appraiseResult3_1">好</label> 127 <input type="radio" id="appraiseResult3_2" name="appraiseResult3" value="C"></input> 128 <label for="appraiseResult3_2">良</label> 129 <input type="radio" id="appraiseResult3_3" name="appraiseResult3" value="D"></input> 130 <label for="appraiseResult3_3">差</label> 131 <input type="radio" id="appraiseResult3_4" name="appraiseResult3" value="E"></input> 132 <label for="appraiseResult3_4">极差</label> 133 </td> 134 </tr> 135 <tr class="even"> 136 <td>运动与健康</td> 137 <td>身心健康状况</td> 138 <td>心理健康，能控制和调节自己的情绪，能正确的评价自我，积极向上</td> 139 <td>2.00</td> 140 <td> 141 <input type="hidden" name="appraiseItemIndex4" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input> 142 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> 143 <input type="hidden" name="appraiseType" value="teacher"></input> 144 <input type="hidden" id="studentInput" name="studentNo" value=""></input> 145 <input type="hidden" name="appraiseWeight4" value="2.00"></input> 146 147 <input type="radio" id="appraiseResult4_0" name="appraiseResult4" value="A"></input> 148 <label for="appraiseResult4_0">优</label> 149 <input type="radio" id="appraiseResult4_1" name="appraiseResult4" value="B"></input> 150 <label for="appraiseResult4_1">好</label> 151 <input type="radio" id="appraiseResult4_2" name="appraiseResult4" value="C"></input> 152 <label for="appraiseResult4_2">良</label> 153 <input type="radio" id="appraiseResult4_3" name="appraiseResult4" value="D"></input> 154 <label for="appraiseResult4_3">差</label> 155 <input type="radio" id="appraiseResult4_4" name="appraiseResult4" value="E"></input> 156 <label for="appraiseResult4_4">极差</label> 157 </td> 158 </tr> 159 <tr class="odd"> 160 <td>运动与健康</td> 161 <td>身心健康状况</td> 162 <td>体育考试合格以上，有良好的身体素质，能正常参加学习劳动</td> 163 <td>3.00</td> 164 <td> 165 <input type="hidden" name="appraiseItemIndex5" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input> 166 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> 167 <input type="hidden" name="appraiseType" value="teacher"></input> 168 <input type="hidden" id="studentInput" name="studentNo" value=""></input> 169 <input type="hidden" name="appraiseWeight5" value="3.00"></input> 170 171 <input type="radio" id="appraiseResult5_0" name="appraiseResult5" value="A"></input> 172 <label for="appraiseResult5_0">优</label> 173 <input type="radio" id="appraiseResult5_1" name="appraiseResult5" value="B"></input> 174 <label for="appraiseResult5_1">好</label> 175 <input type="radio" id="appraiseResult5_2" name="appraiseResult5" value="C"></input> 176 <label for="appraiseResult5_2">良</label> 177 <input type="radio" id="appraiseResult5_3" name="appraiseResult5" value="D"></input> 178 <label for="appraiseResult5_3">差</label> 179 <input type="radio" id="appraiseResult5_4" name="appraiseResult5" value="E"></input> 180 <label for="appraiseResult5_4">极差</label> 181 </td> 182 </tr> 183 <tr class="even"> 184 <td>运动与健康</td> 185 <td>健康生活方式</td> 186 <td>讲究卫生，有良好的卫生习惯</td> 187 <td>3.00</td> 188 <td> 189 <input type="hidden" name="appraiseItemIndex6" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input> 190 <input type="hidden" name="appraiseIndex" 191 value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> 192 <input type="hidden" name="appraiseType" value="teacher"></input> 193 <input type="hidden" id="studentInput" name="studentNo" value=""></input> 194 <input type="hidden" name="appraiseWeight6" value="3.00"></input> 195 196 <input type="radio" id="appraiseResult6_0" name="appraiseResult6" value="A"></input> 197 <label for="appraiseResult6_0">优</label> 198 <input type="radio" id="appraiseResult6_1" name="appraiseResult6" value="B"></input> 199 <label for="appraiseResult6_1">好</label> 200 <input type="radio" id="appraiseResult6_2" name="appraiseResult6" value="C"></input> 201 <label for="appraiseResult6_2">良</label> 202 <input type="radio" id="appraiseResult6_3" name="appraiseResult6" value="D"></input> 203 <label for="appraiseResult6_3">差</label> 204 <input type="radio" id="appraiseResult6_4" name="appraiseResult6" value="E"></input> 205 <label for="appraiseResult6_4">极差</label> 206 </td> 207 </tr> 208 <tr class="odd"> 209 <td>运动与健康</td> 210 <td>健康生活方式</td> 211 <td>珍惜时间，按时作息，生活有规律，合理安排课余生活</td> 212 <td>2.00</td> 213 <td> 214 <input type="hidden" name="appraiseItemIndex7" 215 value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input> 216 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> 217 <input type="hidden" name="appraiseType" value="teacher"></input> 218 <input type="hidden" id="studentInput" name="studentNo" value=""></input> 219 <input type="hidden" name="appraiseWeight7" value="2.00"></input> 220 221 <input type="radio" id="appraiseResult7_0" name="appraiseResult7" value="A"></input> 222 <label for="appraiseResult7_0">优</label> 223 <input type="radio" id="appraiseResult7_1" name="appraiseResult7" value="B"></input> 224 <label for="appraiseResult7_1">好</label> 225 <input type="radio" id="appraiseResult7_2" name="appraiseResult7" value="C"></input> 226 <label for="appraiseResult7_2">良</label> 227 <input type="radio" id="appraiseResult7_3" name="appraiseResult7" value="D"></input> 228 <label for="appraiseResult7_3">差</label> 229 <input type="radio" id="appraiseResult7_4" name="appraiseResult7" value="E"></input> 230 <label for="appraiseResult7_4">极差</label> 231 </td> 232 </tr> 233 <tr class="even"> 234 <td>公民素养</td> 235 <td>有社会责任感</td> 236 <td>关心时政，维护公共利益</td> 237 <td>1.00</td> 238 <td> 239 <input type="hidden" name="appraiseItemIndex8" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input> 240 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> 241 <input type="hidden" name="appraiseType" value="teacher"></input> 242 <input type="hidden" id="studentInput" name="studentNo" value=""></input> 243 <input type="hidden" name="appraiseWeight8" value="1.00"></input> 244 245 <input type="radio" id="appraiseResult8_0" 246 name="appraiseResult8" value="A"></input> 247 <label for="appraiseResult8_0">优</label> 248 <input type="radio" id="appraiseResult8_1" name="appraiseResult8" value="B"></input> 249 <label for="appraiseResult8_1">好</label> 250 <input type="radio" id="appraiseResult8_2" name="appraiseResult8" value="C"></input> 251 <label for="appraiseResult8_2">良</label> 252 <input type="radio" id="appraiseResult8_3" name="appraiseResult8" value="D"></input> 253 <label for="appraiseResult8_3">差</label> 254 <input type="radio" id="appraiseResult8_4" name="appraiseResult8" value="E"></input> 255 <label for="appraiseResult8_4">极差</label> 256 </td> 257 </tr> 258 <tr class="odd"> 259 <td>公民素养</td> 260 <td>有社会责任感</td> 261 <td>扶贫帮困，富有爱心</td> 262 <td>2.00</td> 263 <td> 264 <input type="hidden" name="appraiseItemIndex9" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input> 265 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> 266 <input type="hidden" name="appraiseType" value="teacher"></input> 267 <input type="hidden" id="studentInput" name="studentNo" value=""></input> 268 <input type="hidden" name="appraiseWeight9" value="2.00"></input> 269 270 <input type="radio" id="appraiseResult9_0" name="appraiseResult9" value="A"></input> 271 <label for="appraiseResult9_0">优</label> 272 <input type="radio" id="appraiseResult9_1" name="appraiseResult9" value="B"></input> 273 <label for="appraiseResult9_1">好</label> 274 <input type="radio" id="appraiseResult9_2" name="appraiseResult9" value="C"></input> 275 <label for="appraiseResult9_2">良</label> 276 <input type="radio" id="appraiseResult9_3" name="appraiseResult9" value="D"></input> 277 <label for="appraiseResult9_3">差</label> 278 <input type="radio" id="appraiseResult9_4" name="appraiseResult9" value="E"></input> 279 <label for="appraiseResult9_4">极差</label> 280 </td> 281 </tr> 282 <tr class="even"> 283 <td>公民素养</td> 284 <td>有社会责任感</td> 285 <td>积极参加环保等实践活动</td> 286 <td>2.00</td> 287 <td> 288 <input type="hidden" name="appraiseItemIndex10" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input> 289 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> 290 <input type="hidden" name="appraiseType" value="teacher"></input> 291 <input type="hidden" id="studentInput" name="studentNo" value=""></input> 292 <input type="hidden" name="appraiseWeight10" value="2.00"></input> 293 294 <input type="radio" id="appraiseResult10_0" name="appraiseResult10" value="A"></input> 295 <label for="appraiseResult10_0">优</label> 296 <input type="radio" id="appraiseResult10_1" name="appraiseResult10" value="B"></input> 297 <label for="appraiseResult10_1">好</label> 298 <input type="radio" id="appraiseResult10_2" name="appraiseResult10" value="C"></input> 299 <label for="appraiseResult10_2">良</label> 300 <input type="radio" id="appraiseResult10_3" name="appraiseResult10" value="D"></input> 301 <label for="appraiseResult10_3">差</label> 302 <input type="radio" id="appraiseResult10_4" name="appraiseResult10" value="E"></input> 303 <label for="appraiseResult10_4">极差</label> 304 </td> 305 </tr> 306 <tr class="odd"> 307 <td>公民素养</td> 308 <td>注重修养举止文明</td> 309 <td>勤劳节俭，仪表着装得体</td> 310 <td>2.00</td> 311 <td> 312 <input type="hidden" name="appraiseItemIndex11" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input> 313 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> 314 <input type="hidden" name="appraiseType" value="teacher"></input> 315 <input type="hidden" id="studentInput" name="studentNo" value=""></input> 316 <input type="hidden" name="appraiseWeight11" value="2.00"></input> 317 318 <input type="radio" id="appraiseResult11_0" name="appraiseResult11" value="A"></input> 319 <label for="appraiseResult11_0">优</label> 320 <input type="radio" id="appraiseResult11_1" name="appraiseResult11" value="B"></input> 321 <label for="appraiseResult11_1">好</label> 322 <input type="radio" id="appraiseResult11_2" name="appraiseResult11" value="C"></input> 323 <label for="appraiseResult11_2">良</label> 324 <input type="radio" id="appraiseResult11_3" name="appraiseResult11" value="D"></input> 325 <label for="appraiseResult11_3">差</label> 326 <input type="radio" id="appraiseResult11_4" name="appraiseResult11" value="E"></input> 327 <label for="appraiseResult11_4">极差</label> 328 </td> 329 </tr> 330 <tr class="even"> 331 <td>公民素养</td> 332 <td>注重修养举止文明</td> 333 <td>未经家长或老师同意不得在外住宿或留宿他人</td> 334 <td>1.00</td> 335 <td> 336 <input type="hidden" name="appraiseItemIndex12" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input> 337 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> 338 <input type="hidden" name="appraiseType" value="teacher"></input> 339 <input type="hidden" id="studentInput" name="studentNo" value=""></input> 340 <input type="hidden" name="appraiseWeight12" value="1.00"></input> 341 342 <input type="radio" id="appraiseResult12_0" name="appraiseResult12" value="A"></input> 343 <label for="appraiseResult12_0">优</label> 344 <input type="radio" id="appraiseResult12_1" name="appraiseResult12" value="B"></input> 345 <label for="appraiseResult12_1">好</label> 346 <input type="radio" id="appraiseResult12_2" name="appraiseResult12" value="C"></input> 347 <label for="appraiseResult12_2">良</label> 348 <input type="radio" id="appraiseResult12_3" name="appraiseResult12" value="D"></input> 349 <label for="appraiseResult12_3">差</label> 350 <input type="radio" id="appraiseResult12_4" name="appraiseResult12" value="E"></input> 351 <label for="appraiseResult12_4">极差</label> 352 </td> 353 </tr> 354 <tr class="odd"> 355 <td>公民素养</td> 356 <td>注重修养举止文明</td> 357 <td>尊敬师长，礼貌待人，语言文明</td> 358 <td>2.00</td> 359 <td> 360 <input type="hidden" name="appraiseItemIndex13" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input> 361 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> 362 <input type="hidden" name="appraiseType" value="teacher"></input> 363 <input type="hidden" id="studentInput" name="studentNo" value=""></input> 364 <input type="hidden" name="appraiseWeight13" value="2.00"></input> 365 366 <input type="radio" id="appraiseResult13_0" name="appraiseResult13" value="A"></input> 367 <label for="appraiseResult13_0">优</label> 368 <input type="radio" id="appraiseResult13_1" name="appraiseResult13" value="B"></input> 369 <label for="appraiseResult13_1">好</label> 370 <input type="radio" id="appraiseResult13_2" name="appraiseResult13" value="C"></input> 371 <label for="appraiseResult13_2">良</label> 372 <input type="radio" id="appraiseResult13_3" name="appraiseResult13" value="D"></input> 373 <label for="appraiseResult13_3">差</label> 374 <input type="radio" id="appraiseResult13_4" name="appraiseResult13" value="E"></input> 375 <label for="appraiseResult13_4">极差</label> 376 </td> 377 </tr> 378 </tbody> 379 </table> 380 </div> 381 </fieldset> 382 </form> 383 </body> 384 </html>
posted on 2016-06-20 11:14 guodefu909 阅读(590) 评论(0) 编辑 收藏 举报
