全功能合并单元格js

最新推荐文章于 2025-03-19 11:38:22 发布

gwcgwcjava

最新推荐文章于 2025-03-19 11:38:22 发布

阅读量826

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/gwcgwcjava/article/details/38494973

js 专栏收录该内容

16 篇文章

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>合并表格</title>
<script> 
/// 
//功能：合并表格 
//参数：tb－需要合并的表格ID 
//参数：colLength－－需要对前几列进行合并，比如， 
//想合并前两列，后面的数据列忽略合并，colLength应为2 
//缺省表示对全部列合并 
//startCol:开始列，从0开始
//startRow:开始行，从0开始
//startCol+colLength<=rows
//data:2011.11.06 
/// 
function uniteTable(tb,colLength,startCol,startRow){ 
//检查表格是否规整 
//if(!checkTable(tb)) return; 
var i=0; 
var j=0; 
var rowCount=tb.rows.length; //行数 
alert('行：'+rowCount);
var colCount=tb.rows[startRow].cells.length; //列数 
alert("列："+colCount);
var obj1=null; 
var obj2=null; 
//为每个单元格命名 
for(i=startRow;i<rowCount;i++){ 
	for(j=startCol;j<colCount;j++){ 
		tb.rows[i].cells[j].id="tb__" + i.toString() + "_" + j.toString(); 
	} 
} 
//逐列检查合并 
for(i=startCol;i<colCount;i++){ 
	if(i==(colLength+startCol)) return; 
		obj1=document.getElementById("tb__"+startRow.toString()+"_"+i.toString()) ;
		alert(obj1.innerText);
		for(j=startRow+1;j<rowCount;j++){ 
			obj2=document.getElementById("tb__"+j.toString()+"_"+i.toString()); 
			alert(obj2.innerText);
			if(obj1.innerText==obj2.innerText){ 
				obj1.rowSpan++; 
				obj2.parentNode.removeChild(obj2); 
				alert(obj1.rowSpan);
			}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>230</td>
    <td>4</td>
  </tr>
  <tr>
    <td>a</td>
    <td>if</td>
    <td>320</td>
    <td>230</td>
    <td>5</td>
  </tr>
</table>
<br>
<input type="button" value="合并表格" onClick="uniteTable(table1,2,1,2)">
</body>
</html>