因开发需要，须在表格中挑选对应的列进行合并。在网上找的很多代码都是一次性合并多列，无法跨列选择合并，自己小修改了一下，给需要的朋友节约点时间。
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>合并表格</title>
<script>
///////////////////////////////////////////////
// 功能：合并表格
// 参数：tb－－需要合并的表格ID
// 参数：colLength－－需要对前几列进行合并，比如，
// 想合并前两列，后面的数据列忽略合并，colLength应为2
// 缺省表示对全部列合并
// data: 2005.11.6
///////////////////////////////////////////////
function uniteTable(tb,objCol){
// 检查表格是否规整
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 (t=0;t<objCol.length;t++)
{
i=objCol[t];
obj1=document.getElementById("tb__0_"+i.toString())
for (j=1;j<rowCount;j++)
{
obj2=document.getElementById("tb__"+j.toString()+"_"+i.toString());
if (obj1.innerHTML == obj2.innerHTML)//修改了原来的innerText
{
obj1.rowSpan++;
obj2.parentNode.removeChild(obj2);
}
else
{
obj1=document.getElementById("tb__"+j.toString()+"_"+i.toString());
}
}
}
}
/////////////////////////////////////////
// 功能：检查表格是否规整
// 参数：tb－－需要检查的表格ID
// data: 2005.11.6
/////////////////////////////////////////
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>
</tr>
<tr>
<td>a</td>
<td>for</td>
<td>150</td>
<td>230</td>
</tr>
<tr>
<td>a</td>
<td>if</td>
<td>150</td>
<td>200</td>
</tr>
<tr>
<td>a</td>
<td>if</td>
<td>300</td>
<td>240</td>
</tr>
<tr>
<td>a</td>
<td>if</td>
<td>320</td>
<td>240</td>
</tr>
</table>
<br>
<input type="button" value="合并表格" onClick="uniteTable(table1,Array(0,1,3))">
</body>
分享到：
相关推荐
在合并表格时，可能需要修改模板以实现合并效果。 6. **Ext.util.Renderable**: 如果选择扩展EXTjs的基本组件，可能需要深入理解`Ext.util.Renderable`类，它是EXTjs中所有可视组件的基类，提供了渲染和布局的基础...
- 使用SpreadJS API设置合并的列头，这可能涉及到对工作表的修改和单元格的合并操作。 - 实现数据绑定，确保当数据源更改时，电子表格会自动更新，反之亦然。 - 使用图表模块创建图表，以便直观地呈现数据。 - 通过...
在1.3.1版本中，动态表格列的实现是一个常见的需求，这涉及到表格的灵活性和可扩展性，使用户可以根据不同的数据或者权限展示不同的列。 动态表格列的实现通常包括以下几个关键步骤： 1. **数据准备**：首先，你...
通过修改`cellTpl`，我们可以实现合并单元格的样式。例如，我们可以添加一个条件判断来决定是否应用合并样式： ```javascript viewConfig: { cellTpl: '<td class="{tdCls}" {rowspanAttr} {colspanAttr}>{value}...
**JS版仿EXCEL表格插件--智表（ZCELL）V1.3.1版本** 智表（ZCELL）是一款专为Web应用设计的纯JavaScript实现的表格控件，其核心目标是提供与Microsoft Excel类似的用户体验。这款控件完全基于浏览器运行，无需任何...
在JavaScript的xlsx库中，可以使用`XLSX.readFile`函数解析Excel，`SheetJS`提供了一些方法来处理合并信息。 转换过程如下： 1. **读取Excel文件**：使用合适的库读取Excel文件，将其内容转换为数据结构，如pandas...
SheetJS是一个强大的JavaScript库，它允许开发者读写多种电子表格文件格式，包括XLSX和XLSM。然而，SheetJS的免费版并不支持样式设置，这意味着你不能直接设置单元格的对齐方式、换行或者调整列宽等。这对于需要格式...
1. **多列布局**：FlexGrid可以灵活地设置表格的列数，支持自定义列宽和列头，方便展示复杂的数据结构。 2. **数据绑定**：它可以与后台数据库或其他数据源绑定，实时显示和更新数据，支持多种数据格式，如JSON、...
Grid表格是一种用于组织和展示数据的结构，它通常由行和列组成，允许用户以清晰、有组织的方式查看大量信息。在本例中，提到的是一个针对iPad优化的表格绘制方法，这可能涉及到移动设备上的响应式布局和触摸交互。 ...
5. **表格处理**：能够创建、编辑表格，包括调整行、列数量，合并单元格，设置边框样式等。 6. **多媒体支持**：可以插入音频和视频，满足多媒体内容的展示需求。 7. **HTML源码编辑**：提供查看和编辑HTML源码的...
vxe-table是Vue.js中一款功能强大的表格组件，它为用户提供了丰富的表格操作功能，可以大大提高开发中的表格处理效率。vxe-table组件支持多种特性，包括但不限于基础展示、尺寸调整、样式定制、交互功能和数据处理等...
JSON对象可以表示单元格、行、列以及整个工作表，从而让我们能够轻松地在JavaScript中构建和修改Excel内容。 对于样式部分，`xlsx-style`模块提供了对Excel单元格样式的支持，包括字体、颜色、边框、填充、对齐方式...
在原版flexigrid中，可能由于计算误差或浏览器兼容性问题，当用户尝试拖动列宽调整表格列的大小时，可能导致列的位置错位，影响了整体的视觉效果和交互体验。您修复的版本则解决了这个问题，确保在调整列宽后，各列...
2. **丰富的 API**：提供了大量的 API 接口，允许开发者灵活地控制和修改甘特图的各项功能。 3. **高度可定制**：用户可以根据需求调整甘特图的颜色、布局等外观属性，以及各种行为设置。 4. **事件处理**：支持多种...
在处理表格数据时，可能需要利用DOM API来创建、查找或修改表格元素，如行、列和单元格。 接下来，"jszip.js" 是一个JavaScript库，用于处理ZIP文件。它允许我们读取、创建和编辑ZIP文件。在纯前端环境中，如果需要...
《vxe-table：Vue.js表格解决方案深度解析》 在当今的Web开发中，表格作为一种重要的数据展示和交互组件，被广泛应用于各种业务场景。vxe-table是基于Vue.js框架的一个强大且灵活的表格解决方案，其版本v4.5.20在...
后端Node.js可借助pandas-js或js-xlsx处理表格数据。 6. **数据处理**：在编辑表格对象时，通常会涉及数据清洗（去除空值、处理异常值）、数据转换（类型转换、聚合计算）、数据可视化（图表制作）等步骤。这些操作...
这里介绍的是一款基于jQuery的插件，能够自动合并表格中相同内容的单元格，实现高效的数据整理。 首先，我们来看看插件的运行效果。原表格包含四列：col0、col1、col2和col3。表格中部分城市的名称（如SuZhou、...
在这个版本中，重点提及的是对`el-table`组件的修改，特别是关于表格合并以及处理合并后hover样式的优化。 `el-table`是Element UI中的一个核心组件，用于展示结构化的数据，比如报表或统计信息。在实际应用中，...
Handsontable是一个流行的开源JavaScript库，它提供了一个强大的表格组件，能够满足上述提到的许多功能。版本0.20.1可能包含该库的源代码、文档和示例，帮助开发者快速集成和定制。而`table-demo.zip`可能包含了一些...