合并表格

最新推荐文章于 2021-10-20 22:41:43 发布

weixin_34348174

最新推荐文章于 2021-10-20 22:41:43 发布

阅读量87

点赞数

文章标签： javascript ViewUI

<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]);