1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JS合并表格</title> 6 <style> 7 * { 8 font-size:12px 9 } 10 11 table{ margin-top:5px;} 12 13 .table1 { 14 border-collapse:collapse; 15 width:600px; 16 border:1px solid #7A90A8; 17 border-top:3px; 18 } 19 td { 20 padding-left:3px; 21 text-align:left; 22 } 23 24 caption{ 25 background:#9DACBF; 26 font-weight:600; 27 padding:4px; 28 color:#FFF; } 29 </style> 30 </head> 31 32 <body> 33 34 <table id="ii" class="table1" border="1" align="center"> 35 <caption>2010年北京市医院分布情况</caption> 36 <tr> 37 <td>所在区</td> 38 <td>二级医院数量</td> 39 <td>三级医院数量</td> 40 <td>三甲级医院数量</td> 41 <td>四级医院数量</td> 42 </tr> 43 <tr> 44 <td>海淀区</td> 45 <td>8</td> 46 <td>54</td> 47 <td>14</td> 48 <td>8</td> 49 </tr> 50 <tr> 51 <td>海淀区</td> 52 <td>15</td> 53 <td>64</td> 54 <td>36</td> 55 <td>76</td> 56 </tr> 57 <tr> 58 <td>朝阳区</td> 59 <td>5</td> 60 <td>64</td> 61 <td>69</td> 62 <td>23</td> 63 </tr> 64 <tr> 65 <td>朝阳区</td> 66 <td>17</td> 67 <td>54</td> 68 <td>43</td> 69 <td>18</td> 70 </tr> 71 <tr> 72 <td>朝阳区</td> 73 <td>73</td> 74 <td>35</td> 75 <td>45</td> 76 <td>72</td> 77 </tr> 78 </table> 79 80 81 82 <script type="text/javascript"> 83 function tableSpan(tb1) 84 { 85 //合并行 86 //列 87 for(var i=tb1.rows[0].childNodes.length-1;i>=0;i--) 88 { 89 //行 90 for(var j=tb1.rows.length-1;j>0;j--) 91 { 92 //当前单元格与上一单元格比较 93 if(tb1.rows[j].childNodes[i].innerHTML==tb1.rows[j-1].childNodes[i].innerHTML) 94 { 95 tb1.rows[j-1].childNodes[i].rowSpan += tb1.rows[j].childNodes[i].rowSpan; 96 tb1.rows[j].removeChild(tb1.rows[j].childNodes[i]); 97 } 98 } 99 } 100 101 //合并列 102 //行 103 for(var i=tb1.rows.length-1;i>=0;i--) 104 { break;//不合并列 105 //列 106 for(var j=tb1.rows[i].childNodes.length-1;j>0;j--) 107 { 108 //当前单元格与左一单元格比较 109 if(tb1.rows[i].childNodes[j].innerHTML==tb1.rows[i].childNodes[j-1].innerHTML) 110 { 111 tb1.rows[i].childNodes[j-1].colSpan += tb1.rows[i].childNodes[j].colSpan; 112 tb1.rows[i].removeChild(tb1.rows[i].childNodes[j]); 113 } 114 } 115 } 116 } 117 tableSpan(ii); 118 </script> 119 </body> 120 </html>
今天看到一个博客，觉得里面代码跟想法不错，故将dsna的代码保留在这里，谢谢！