<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>合并表格</title>
<script>
///////////////////////////////////////////////
//功能：合并表格
//参数：tb－需要合并的表格ID
//参数：colLength－－需要对前几列进行合并，比如，
//想合并前两列，后面的数据列忽略合并，colLength应为2
//缺省表示对全部列合并
//data:2011.11.06
///////////////////////////////////////////////
function uniteTable(tb,colLength){
//检查表格是否规整
if(!checkTable(tb)) return;
var i=0;
var j=0;
var rowCount=tb.rows.length; //行数
var colCount=tb.rows[0].cells.length; //列数
var obj1=null;
var obj2=null;
//为每个单元格命名
for(i=0;i<rowCount;i++){
for(j=0;j<colCount;j++){
tb.rows[i].cells[j].id="tb__" + i.toString() + "_" + j.toString();
}
}
//逐列检查合并
for(i=0;i<colCount;i++){
if(i==colLength) return;
obj1=document.getElementById("tb__0_"+i.toString())
for(j=1;j<rowCount;j++){
obj2=document.getElementById("tb__"+j.toString()+"_"+i.toString());
if(obj1.innerText==obj2.innerText){
obj1.rowSpan++;
obj2.parentNode.removeChild(obj2);
}else{
obj1=document.getElementById("tb__"+j.toString()+"_"+i.toString());
}
}
}
}
/////////////////////////////////////////
//功能：检查表格是否规整
//参数：tb－－需要检查的表格ID
//data: 2011.11.06
/////////////////////////////////////////
function checkTable(tb){
if(tb.rows.length==0) return false;
if(tb.rows[0].cells.length==0) return false;
for(var i=0;i<tb.rows.length;i++){
if(tb.rows[0].cells.length!=tb.rows[i].cells.length) return false;
}
return true;
}
</script>
</head>
<body>
<table width="400" border="1" id="table1">
<tr>
<td>a</td>
<td>for</td>
<td>100</td>
<td>200</td>
<td>1</td>
</tr>
<tr>
<td>a</td>
<td>for</td>
<td>100</td>
<td>300</td>
<td>2</td>
</tr>
<tr>
<td>a</td>
<td>if</td>
<td>100</td>
<td>200</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>if</td>
<td>300</td>
<td>300</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>if</td>
<td>320</td>
<td>300</td>
<td>5</td>
</tr>
</table>
<br><input type="button" value="合并表格" onClick="uniteTable(table1,4)">
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
function autoRowSpan(tb,row,col)
{
var lastValue="";
var value="";
var pos=1;
for(var i=row;i<tb.rows.length;i++){
value = tb.rows[i].cells[col].innerText;
if(lastValue == value){
tb.rows[i].deleteCell(col);
tb.rows[i-pos].cells[col].rowSpan = tb.rows[i-pos].cells[col].rowSpan+1;
pos++;
}else{
lastValue = value;
pos=1;
}
}
}
</SCRIPT>
<BODY onload="autoRowSpan(tb,0,0)">
<TABLE id="tb" border="1">
<THEAD>
<TR >
<TD>国家</TD>
<TD>地区</TD>
</TR>
</THEAD>
<TR>
<TD>中国</TD>
<TD>河南</TD>
</TR>
<TR>
<TD>中国</TD>
<TD>四川</TD>
</TR>
<TR>
<TD>中国</TD>
<TD>北京</TD>
</TR>
<TR>
<TD>美国</TD>
<TD>纽约</TD>
</TR>
<TR>
<TD>美国</TD>
<TD>洛杉矶</TD>
</TR>
<TR>
<TD>英国</TD>
<TD>伦敦</TD>
</TR>
</TABLE>
</BODY>
</HTML>
//tbl:table对应的dom元素，
//beginRow:从第几行开始合并（从0开始），
//endRow:合并到哪一行，负数表示从底下数几行不合并
//colIdxes:合并的列下标的数组，如[0,1]表示合并前两列，[0]表示只合并第一列
function mergeSameCell(tbl,beginRow,endRow,colIdxes){
var colIdx = colIdxes[0];
var newColIdxes = colIdxes.concat();
newColIdxes.splice(0,1)
var delRows = new Array();
var rs = tbl.rows;
//endRow为0的时候合并到最后一行，小于0时表示最后有-endRow行不合并
if(endRow === 0){
endRow = rs.length - 1;
}else if(endRow < 0){
endRow = rs.length - 1 + endRow;
}
var rowSpan = 1; //要设置的rowSpan的值
var rowIdx = beginRow; //要设置rowSpan的cell行下标
var cellValue; //存储单元格里面的内容
for(var i=beginRow; i<= endRow + 1; i++){
if(i === endRow + 1){//过了最后一行的时候合并前面的单元格
if(newColIdxes.length > 0){
mergeSameCell(tbl,rowIdx,endRow,newColIdxes);
}
rs[rowIdx].cells[colIdx].rowSpan = rowSpan;
}else{
var cell = rs[i].cells[colIdx];
if(i === beginRow){//第一行的时候初始化各个参数
cellValue = cell.innerHTML;
rowSpan = 1;
rowIdx = i;
}else if(cellValue != cell.innerHTML){//数据改变合并前面的单元格
cellValue = cell.innerHTML;
if(newColIdxes.length > 0){
mergeSameCell(tbl,rowIdx,i - 1,newColIdxes);
}
rs[rowIdx].cells[colIdx].rowSpan = rowSpan;
rowSpan = 1;
rowIdx = i;
}else if(cellValue === cell.innerHTML){//数据和前面的数据重复的时候删除单元格
rowSpan++;
delRows.push(i);
}
}
}
for(var j=0;j<delRows.length; j++){
rs[delRows[j]].deleteCell(colIdx);
}
}
//调用
mergeSameCell(document.getElementById('tableTbl'),1,-1,[0,1]);
