最近老是遇见第一列是地市，第二列是区县。说一堆区县对应一个地市看起来不太好看，要把第一列的地市合并在一起。故写了个小小的Demo，留待以后复用。
先看效果图，表一为原数据效果，表二为合并第一列后的数据效果：
核心代码为一小段js：
<script type="text/javascript">
window.onload = function () {
mergeTable("tt2",0,1);
};
/* tableId:表格的ID,mergeColIndex:需要合并的列序号,beginRowIndex:合并开始的行序号 */
function mergeTable(tableId,mergeColIndex,beginRowIndex){
var table = document.getElementById(tableId);
if(table!=null){
var totalRows = table.rows.length;
for(var i=beginRowIndex;i<totalRows;i++){
var rowSpan = 1;
var cell = table.rows[i].cells[mergeColIndex].innerHTML;
for(var j=i+1;j<totalRows;j++){
if(table.rows[j].cells[mergeColIndex].innerHTML==cell){
rowSpan++;
table.rows[i].cells[mergeColIndex].rowSpan = rowSpan;//设置rowSpan
table.rows[j].cells[mergeColIndex].style.display = "none";//当前行被合并了，所以这里设置为none
}else{
break;
}
}
i = i+rowSpan-1;//跳到最后一个相同的行，然后再+1就是另一个不相同的行啦
}
}
}
</script>
下面是我的静态html代码，可以直接复制下来，放到文本文件中，然后保存为.html文件，就可以直接打开看效果啦。
<!DOCTYPE HTML>
<html>
<head>
<title>mergeTable</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="author" content="yunsyz"/>
<meta name="revised" content="2015-01-22" sechema="YYYY-MM-DD"/>
<meta http-equiv="Refresh" content="60;url=http://blog.csdn.net/yunsyz/article/details/43016663"/>
<style type="text/css">
.mergeTable{width:100%;border:1px solid;border-collapse:collapse;table-layout:fixed;}
.mergeTable th,.mergeTable td{border:1px solid;text-align:center;}
</style>
</head>
<body>
<div>
<h4>表一</h4>
<table id="tt1" class="mergeTable">
<thead>
<tr>
<th>地市</th>
<th>区县</th>
<th>本月值</th>
<th>上月值</th>
<th>环比</th>
</tr>
</thead>
<tbody>
<tr>
<td>武汉</td>
<td>汉口</td>
<td>45.34</td>
<td>65.78</td>
<td>22.03%</td>
</tr>
<tr>
<td>武汉</td>
<td>武昌</td>
<td>55.34</td>
<td>75.78</td>
<td>32.03%</td>
</tr>
<tr>
<td>武汉</td>
<td>汉阳</td>
<td>65.34</td>
<td>85.78</td>
<td>42.03%</td>
</tr>
<tr>
<td>上海</td>
<td>浦东</td>
<td>56.11</td>
<td>48.87</td>
<td>0.34%</td>
</tr>
<tr>
<td>上海</td>
<td>城区</td>
<td>65.11</td>
<td>43.87</td>
<td>1.34%</td>
</tr>
<tr>
<td>重庆</td>
<td>城区</td>
<td>54.00</td>
<td>32.90</td>
<td>10.00%</td>
</tr>
<tr>
<td>北京</td>
<td>二环</td>
<td>73.77</td>
<td>21.34</td>
<td>42.46%</td>
</tr>
<tr>
<td>北京</td>
<td>三环</td>
<td>55.77</td>
<td>17.34</td>
<td>165.46%</td>
</tr>
</tbody>
</table>
<h4>表二</h4>
<table id="tt2" class="mergeTable">
<thead>
<tr>
<th>地市</th>
<th>区县</th>
<th>本月值</th>
<th>上月值</th>
<th>环比</th>
</tr>
</thead>
<tbody>
<tr>
<td>武汉</td>
<td>汉口</td>
<td>45.34</td>
<td>65.78</td>
<td>22.03%</td>
</tr>
<tr>
<td>武汉</td>
<td>武昌</td>
<td>55.34</td>
<td>75.78</td>
<td>32.03%</td>
</tr>
<tr>
<td>武汉</td>
<td>汉阳</td>
<td>65.34</td>
<td>85.78</td>
<td>42.03%</td>
</tr>
<tr>
<td>上海</td>
<td>浦东</td>
<td>56.11</td>
<td>48.87</td>
<td>0.34%</td>
</tr>
<tr>
<td>上海</td>
<td>城区</td>
<td>65.11</td>
<td>43.87</td>
<td>1.34%</td>
</tr>
<tr>
<td>重庆</td>
<td>城区</td>
<td>54.00</td>
<td>32.90</td>
<td>10.00%</td>
</tr>
<tr>
<td>北京</td>
<td>二环</td>
<td>73.77</td>
<td>21.34</td>
<td>42.46%</td>
</tr>
<tr>
<td>北京</td>
<td>三环</td>
<td>55.77</td>
<td>17.34</td>
<td>165.46%</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
window.onload = function () {
mergeTable("tt2",0,1);
};
/* tableId:表格的ID,mergeColIndex:需要合并的列序号,beginRowIndex:合并开始的行序号 */
function mergeTable(tableId,mergeColIndex,beginRowIndex){
var table = document.getElementById(tableId);
if(table!=null){
var totalRows = table.rows.length;
for(var i=beginRowIndex;i<totalRows;i++){
var rowSpan = 1;
var cell = table.rows[i].cells[mergeColIndex].innerHTML;
for(var j=i+1;j<totalRows;j++){
if(table.rows[j].cells[mergeColIndex].innerHTML==cell){
rowSpan++;
table.rows[i].cells[mergeColIndex].rowSpan = rowSpan;//设置rowSpan
table.rows[j].cells[mergeColIndex].style.display = "none";//当前行被合并了，所以这里设置为none
}else{
break;
}
}
i = i+rowSpan-1;//跳到最后一个相同的行，然后再+1就是另一个不相同的行啦
}
}
}
</script>
</body>
</html>
时间： 2024-10-04 16:43:50