合并表格第一列
來源：程序員人生 發布時間：2015-01-28 08:57:31 閱讀次數：3133次
最近總是遇見第1列是地市，第2列是區縣。說1堆區縣對應1個地市看起來不太好看，要把第1列的地市合并在1起。故寫了個小小的Demo，留待以后復用。
先看效果圖，表1為原數據效果，表2為合并第1列后的數據效果：
核心代碼為1小段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⑻"/>
<meta name="author" content="yunsyz"/>
<meta name="revised" content="2015-01⑵2" 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>表1</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>2環</td>
<td>73.77</td>
<td>21.34</td>
<td>42.46%</td>
</tr>
<tr>
<td>北京</td>
<td>3環</td>
<td>55.77</td>
<td>17.34</td>
<td>165.46%</td>
</tr>
</tbody>
</table>
<h4>表2</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>2環</td>
<td>73.77</td>
<td>21.34</td>
<td>42.46%</td>
</tr>
<tr>
<td>北京</td>
<td>3環</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>
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
