您的位置：首页 > 其它

改进版网页表格的合并单元格(支持不连续的列合并)

2013-05-24 15:30 357 查看
本脚本支持不连续的列合并，比如需要合并的列为1,3,5，或者是随意的N列，合并的只能是垂直方向的合并，不支持水平方向的合并。下面看代码：

<html>
<script language="JavaScript">
///////////////////////////////////////////////
//   功能：合并表格
//   参数：tb－－需要合并的表格ID
//   参数：colBegin－－需要合并的开始列序号
//   参数：colEnd－－需要合并的结束列序号
//   注意：列序号由0开始。
///////////////////////////////////////////////
function unionTab(tb, colArray) {
//   检查表格是否规整
if (!checkTab(tb))
return;
var i = 0;
var j = 0;
var rowCount = tb.rows.length; // 行数
var colCount = tb.rows[0].cells.length; // 列数
var mergeCount=colArray.length;//合并的列数
var obj1 = null;
var obj2 = null;
var objtemp1=new Array();
var objtemp2=new Array();

//为每个单元格命名,表头不命名
for (i = 1; i < rowCount; i++) {
for (j = 0; j < colCount; j++) {
tb.rows[i].cells[j].id = "tb_" + i.toString() + "_" + j.toString();
}
}
var k=mergeCount-1;
var i=0;
//从后往前检查，进行逐列检查合并,开始列为colArray中最后的列序号。
for (f = k; f >= 0; f--) {
i=colArray[f];
//当f>0时有前方的单元格(即要合并的列表的第一个列前面是不作判断的。)
if (f>0) {
//查找第一行单元格前几单元格,l为列值
for(l=0;l<f;l++)
{
objtemp1[l]=document.getElementById("tb_1_" + colArray[l].toString());
alert("单元格objtemp1,1_"+colArray[l].toString() + ",内容:" + objtemp1[l].innerText);
}
}
//当前检查列的第一个记录。
obj1 = document.getElementById("tb_1_" + i.toString());

for (j = 2; j < rowCount; j++) {
if (f > 0) {
//查找当前单元格前几单元格,l为列值
for(l=0;l<f;l++){
objtemp2[l]=document.getElementById("tb_" + j.toString() + "_"+ colArray[l].toString());
}
}
//检测记录的下一条记录。
obj2 = document.getElementById("tb_" + j.toString() + "_"+ i.toString());
if (obj1.innerText == obj2.innerText) {
if (f > 0) {
if (checkArray(objtemp1,objtemp2)) {
obj1.rowSpan++;
obj2.parentNode.removeChild(obj2);
} else {
obj1 = document.getElementById("tb_" + j.toString()+ "_" + i.toString());
for(l=0;l<f;l++){
objtemp1[l]=document.getElementById("tb_" + j.toString() + "_"+ colArray[l].toString());
}
}
} else {
obj1.rowSpan++;
obj2.parentNode.removeChild(obj2);
}
} else {
obj1 = document.getElementById("tb_" + j.toString() + "_"+ i.toString());
for(l=0;l<f;l++){
objtemp1[l]=document.getElementById("tb_" + j.toString() + "_"+ colArray[l].toString());
}
}
}
}
}

/////////////////////////////////////////
// 功能：检查表格是否规整
// 参数：tb－－需要检查的表格ID
// ///////////////////////////////////////
function checkTab(tb) {
if (tb.rows.length == 0)
return false;
//如果只有一行表头也返回false
if(tb.rows.length==1)
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;
}

//检查取出的值是否相等
function checkArray(arr1,arr2){
for(i=0;i<arr1.length;i++){
if(arr1[i].innerText==arr2[i].innerText){

}else{
return false;
}
}
return true;
}
</script>
<body>
<table   width="400"   border="1"   id="table1">
<tr>
<td>人员</td>
<td>总公司</td>
<td>分公司</td>
<td>部门</td>
<td>科室</td>

</tr>
<tr>
<td>1</td>
<td>a总公司</td>
<td>for分公司</td>
<td>100部门</td>
<td>200科室</td>

</tr>
<tr>
<td>2</td>
<td>a总公司</td>
<td>for分公司</td>
<td>100部门</td>
<td>200科室</td>

</tr>
<tr>
<td>3</td>
<td>a总公司</td>
<td>for分公司</td>
<td>100部门</td>
<td>201科室</td>

</tr>
<tr>
<td>4</td>
<td>a总公司</td>
<td>for分公司</td>
<td>100部门</td>
<td>201科室</td>

</tr>
<tr>
<td>5</td>
<td>a总公司</td>
<td>for分公司</td>
<td>200部门</td>
<td>201科室</td>

</tr>
<tr>
<td>6</td>
<td>a总公司</td>
<td>for分公司</td>
<td>200部门</td>
<td>201科室</td>

</tr>
<tr>
<td>7</td>
<td>b总公司</td>
<td>for分公司</td>
<td>200部门</td>
<td>201科室</td>

</tr>
<tr>
<td>8</td>
<td>b总公司</td>
<td>for分公司</td>
<td>200部门</td>
<td>201科室</td>

</tr>
</table>
<br>
<input   type="button"   value="合并表格"   onClick="unionTab(table1,[1,3,4])">
</body>
<script language="JavaScript">
unionTab(table1,[1,3,4]);
//unionTab(table1,3,3);
</script>
</html>


　　

该脚本是从网上找了代码后，经过改进而来的。

原创作品出自努力偷懒，转载请说明文章出处：http://blog.csdn.net/kfarvid或 http://www.cnblogs.com/kfarvid/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航