表格中经常会有不规则的表格出现，收集了点网上写的合并单元格的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>
分享到：
相关推荐
在传统的HTML表格中，合并单元格通常使用`<td>`的`colspan`和`rowspan`属性来完成，但在Vue Easytable组件中，这种方式并不适用。Vue Easytable提供了自定义渲染（render）和数据处理（data processing）的方法来...
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
在JavaScript编程中，合并单元格是一项常见的需求，特别是在处理HTML表格时。这通常涉及到优化数据展示，例如在报告或统计中避免重复信息占用过多空间。本文将深入探讨如何使用JavaScript来实现相同内容的单元格合并...
通过Datatables的`drawCallback`或`initComplete`事件，在表格渲染完成后合并单元格。遍历预处理得到的合并信息，使用DOM操作修改表格结构。 ```javascript $('#example').DataTable({ // ...其他配置... ...
js导出execl，自动合并单元格，自动增行，增列
使用js合并单元格，页面初始化的时候执行mergeCell.js里面的方法，合并内容相同的单元格，简单方便。
"layui table合并单元格.zip" 这个压缩包正是提供了关于如何在layui的表格中实现单元格合并的示例和资源。 首先，"layui table.txt" 文件可能包含了layui表格组件的基础用法和API介绍。layui的表格组件支持动态加载...
在Web开发中，尤其是构建数据报表时，列表多行多列合并单元格是一个常见的需求。这通常涉及到HTML、CSS和JavaScript技术的综合运用，尤其是在使用表格（table）元素展示数据时。下面将详细讲解如何实现这个功能。 ...
js 合并单元格 只有一个方法 思路清晰 可直接使用 注：此方法为合并某一列的单元格 若合并其他 可在吃方法基础上修改
### JavaScript 合并单元格详解 #### 一、概述 在网页开发中，表格是一种非常常见的数据展示形式。为了使表格中的数据呈现更加美观、合理，我们常常需要对某些单元格进行合并操作。本篇文章将重点介绍如何使用...
本项目提供了一个解决方案，它支持合并单元格和合并行，无需依赖Microsoft Office，这对于那些无法安装Office环境或者希望在服务器端执行此操作的用户来说，具有很高的实用价值。 首先，我们要理解HTML表格...
总结，js合并单元格主要通过设置`colspan`和`rowspan`属性实现，而实际操作中，我们还需要结合JavaScript的DOM操作能力来满足动态需求。理解这些基础知识和技巧，能帮助我们在开发中更高效地处理表格数据和布局。
Bootstrap Table是一款基于...通过以上步骤，我们就能在使用Bootstrap Table时实现导出合并单元格的功能，提高数据展示的效率和质量。在实际开发中，可以根据项目需求调整和定制这些方法，以满足更复杂的需求。
根据提供的文件信息，我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的，并且还涉及了模板（Template）的使用、...
winform使用Microsoft.Office.Interop.Excel读取带有合并单元格的Excel的demo，Excel版本不限，可以是.xls可以是.xlsx版本。本程序采用webbrowser显示读取的数据，使用bootstrap的css样式美化table表格，使用Json...
只要输入table的id，就可以自动合并单元格，只要上下相邻的单元格相同的，都会合并 html版比较好，点下面的 http://download.csdn.net/source/1276574
在本篇内容中，我们将深入探讨如何在Vue项目中实现“vue合并单元格”的功能。 首先，让我们了解表格的基本结构。在HTML中，`<table>`元素用于创建表格，而`<tr>`表示行，`<th>`表示表头单元格，`<td>`表示普通数据...
综上所述，"仿Excel合并单元格实例点击合并表格单元格"是一个融合了JavaScript编程、DOM操作、事件处理、CSS样式设计、数据管理和性能优化等多个技术领域的项目。通过学习和实践这样的实例，开发者不仅可以提升自己...
本js脚本完美的实现了table单元格的合并，合并后犹如交叉表的形式，非常完美，并在其中附带例子可以验证。
4. **合并单元格**：合并单元格功能允许用户将相邻的单元格组合成一个大的单元格，常用于创建标题或合并相同的数据。用户可以选择多个单元格，然后执行“合并单元格”操作，以实现这一效果。 5. **其他表格操作**：...