首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

JS自动归拢表格

2012-11-07 
JS自动合并表格js合并单元格.html!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http

JS自动合并表格

js合并单元格.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS合并表格</title><style>* {font-size:12px}table{ margin-top:5px;}.table1 {border-collapse:collapse;width:600px;border:1px solid #7A90A8;border-top:3px;}td {padding-left:3px;text-align:left;}caption{background:#9DACBF;font-weight:600;padding:4px;color:#FFF; }</style></head><body><table id="ii" border="1" align="center"><caption>2010年北京市医院分布情况</caption>  <tr>    <td>所在区</td>    <td>二级医院数量</td>    <td>三级医院数量</td>    <td>三甲级医院数量</td>    <td>四级医院数量</td>  </tr>  <tr>    <td>海淀区</td>    <td>8</td>    <td>54</td>    <td>14</td>    <td>8</td>  </tr>  <tr>    <td>海淀区</td>    <td>15</td>    <td>64</td>    <td>36</td>    <td>76</td>  </tr>  <tr>    <td>朝阳区</td>    <td>5</td>    <td>64</td>    <td>69</td>    <td>23</td>  </tr>  <tr>    <td>朝阳区</td>    <td>17</td>    <td>54</td>    <td>43</td>    <td>18</td>  </tr>  <tr>    <td>朝阳区</td>    <td>73</td>    <td>35</td>    <td>45</td>    <td>72</td>  </tr></table><script type="text/javascript">function tableSpan(tb1){//合并行//列for(var i=tb1.rows[0].childNodes.length-1;i>=0;i--){//行for(var j=tb1.rows.length-1;j>0;j--){//当前单元格与上一单元格比较if(tb1.rows[j].childNodes[i].innerHTML==tb1.rows[j-1].childNodes[i].innerHTML){tb1.rows[j-1].childNodes[i].rowSpan += tb1.rows[j].childNodes[i].rowSpan;tb1.rows[j].removeChild(tb1.rows[j].childNodes[i]);}}}//合并列//行for(var i=tb1.rows.length-1;i>=0;i--){   break;//不合并列//列for(var j=tb1.rows[i].childNodes.length-1;j>0;j--){//当前单元格与左一单元格比较if(tb1.rows[i].childNodes[j].innerHTML==tb1.rows[i].childNodes[j-1].innerHTML){tb1.rows[i].childNodes[j-1].colSpan += tb1.rows[i].childNodes[j].colSpan;tb1.rows[i].removeChild(tb1.rows[i].childNodes[j]);}}}}tableSpan(ii);</script></body></html>

?

合并效果,将所在区相邻且字符同的都合并了

 

热点排行