您的位置：首页 > Web前端 > JavaScript

JS自动合并表格

2015-01-16 16:20 211 查看

<!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" class="table1" 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>

View Code

今天看到一个博客，觉得里面代码跟想法不错，故将dsna的代码保留在这里，谢谢！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航