表格中经常会有不规则的表格出现，收集了点网上写的合并单元格的js代码，感觉可以扩展，于是就试着扩展了一下，
不过只能合并表格中的数据时有规律的数据，不能进行任意合并。
下面是些写的脚本代码
///////////////////////////////////////////////
// 功能：合并表格
// 参数：tb－－需要合并的表格ID
// 参数：colLength－－需要对前几列进行合并，比如，
// 想合并前两列，后面的数据列忽略合并，colLength应为2
///////////////////////////////////////////////
function unionTab(tb, colLength) {
// 检查表格是否规整
if (!checkTab(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;
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=colLength-1;
//从后往前检查，进行逐列检查合并,开始列为colLength-1
for (i = k; i >= 0; i--) {
//当i>0时有前方的单元格
if (i > 0) {
//查找当前单元格前几单元格,l为列值
for(l=0;l<i;l++)
{
objtemp1[l]=document.getElementById("tb_1_" + l.toString());
alert("单元格objtemp1,1_"+l.toString() + ",内容:" + objtemp1[l].innerText);
}
}
obj1 = document.getElementById("tb_1_" + i.toString());
for (j = 2; j < rowCount; j++) {
if (i > 0) {
//查找当前单元格前几单元格,l为列值
for(l=0;l<i;l++){
objtemp2[l]=document.getElementById("tb_" + j.toString() + "_"
+ l.toString());
}
}
obj2 = document.getElementById("tb_" + j.toString() + "_"+ i.toString());
if (obj1.innerText == obj2.innerText) {
if (i > 0) {
if (checkArray(objtemp1,objtemp2)) {
obj1.rowSpan++;
obj2.parentNode.removeChild(obj2);
} else {
obj1 = document.getElementById("tb_" + j.toString()
+ "_" + i.toString());
for(l=0;l<i;l++){
objtemp1[l]=document.getElementById("tb_" + j.toString() + "_"
+ l.toString());
}
}
} else {
obj1.rowSpan++;
obj2.parentNode.removeChild(obj2);
}
} else {
obj1 = document.getElementById("tb_" + j.toString() + "_"
+ i.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;
}
以上脚本可以处理像如下表格中的数据，表格中相同内容的单元格会进行合并，并具有依赖性。
即只有依赖列相同，才会进行合并。
<html>
<body>
<table width="400" border="1" id="table1">
<tr>
<td>总公司</td>
<td>分公司</td>
<td>部门</td>
<td>科室</td>
<td>人员</td>
</tr>
<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>200科室</td>
<td>2</td>
</tr>
<tr>
<td>a总公司</td>
<td>for分公司</td>
<td>100部门</td>
<td>201科室</td>
<td>3</td>
</tr>
<tr>
<td>a总公司</td>
<td>for分公司</td>
<td>100部门</td>
<td>201科室</td>
<td>4</td>
</tr>
<tr>
<td>a总公司</td>
<td>for分公司</td>
<td>200部门</td>
<td>201科室</td>
<td>5</td>
</tr>
<tr>
<td>a总公司</td>
<td>for分公司</td>
<td>200部门</td>
<td>201科室</td>
<td>6</td>
</tr>
<tr>
<td>b总公司</td>
<td>for分公司</td>
<td>200部门</td>
<td>201科室</td>
<td>7</td>
</tr>
<tr>
<td>b总公司</td>
<td>for分公司</td>
<td>200部门</td>
<td>201科室</td>
<td>8</td>
</tr>
</table>
<br>
<input type="button" value="合并表格" onClick="unionTab(table1,4)">
</body>
</html>
分享到：
相关推荐
js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格
demo实例 合并紧挨着的 单元格 通过js实现 希望对大家有帮助
使用js合并单元格，页面初始化的时候执行mergeCell.js里面的方法，合并内容相同的单元格，简单方便。
jquery datatable 单元格合并，通过js实现相同内容单元格动态合并！！！jquery datatable 单元格合并，通过js实现相同内容单元格动态合并！！！
vue-easytable合并单元格，文档包括ftl文件及对应的js
js 合并单元格 只有一个方法 思路清晰 可直接使用 注：此方法为合并某一列的单元格 若合并其他 可在吃方法基础上修改
js导出execl，自动合并单元格，自动增行，增列
winform使用Microsoft.Office.Interop.Excel读取带有合并单元格的Excel的demo，Excel版本不限，可以是.xls可以是.xlsx版本。本程序采用webbrowser显示读取的数据，使用bootstrap的css样式美化table表格，使用Json...
主要介绍了JS实现动态修改table及合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改table单元格的具体操作技巧,需要的朋友可以参考下
本js脚本完美的实现了table单元格的合并，合并后犹如交叉表的形式，非常完美，并在其中附带例子可以验证。
合并单元格好JS，特别适用与动态生成表格的单元格合并，报表开发
带富文本编辑器以及支持表格操作，可拉伸单元格宽度、增加行、增加列、合并单元格
只要输入table的id，就可以自动合并单元格，只要上下相邻的单元格相同的，都会合并 html版比较好，点下面的 http://download.csdn.net/source/1276574
JSP页面实现合并单元格，在js中写入，jsp中可以调用此js。
html直接看效果 只要输入table的id，就可以自动合并单元格，只要上下相邻的单元格相同的，都会合并
仿Excel合并单元格实例点击合并表格单元格是合并表格里面相同的列，很实用的。
通过jQuery简单实现的一个合并单元格功能
利用js合并table相同内容单元格并js方式自动生成，把文本内容复制进js中，应该就知道大概咋用了
spreadjs_包含合并单元格的数据绑定-demo
jQuery、JS编写的合并单元格，可以增加、删除、合并单元格