<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,colLength){
// 检查表格是否规整
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 (i=0;i<colCount;i++){
if (i==colLength) return;
obj1=document.getElementById("tb__0_"+i.toString())
for (j=1;j<rowCount;j++){
obj2=document.getElementById("tb__"+j.toString()+"_"+i.toString());
if (obj1.innerText == obj2.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>100</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>230</td>
</tr>
</table>
<br>
<input type="button" value="合并表格" onClick="uniteTable(table1,2)">
</body>
</html>
分享到：
相关推荐
在JavaScript编程中，合并表格相同数据列是一种常见的需求，特别是在数据展示或数据分析中。这个任务通常涉及对HTML表格（`<table>`元素）的操作，尤其是处理具有大量重复数据的列。在给定的资源中，"colm2.html"...
### EasyUI指定列-合并相同数据行 #### 易理解释与应用场景 在日常的数据处理过程中，经常会遇到需要对表格中的重复数据进行整理的情况。EasyUI作为一种轻量级的用户界面库，提供了丰富的功能来帮助开发者高效地...
本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码，供大家参考，具体内容如下 作者：秋名 思路：后台查询表格数据，查询出来后直接传到前端，前端通过foreach循环，然后对相同的表格进行合并。（同...
为了提升用户体验，我们可以利用JavaScript（js）以及jQuery库来实现表格相同数据的合并功能，使表格看起来更整洁、专业。 首先，我们要理解JavaScript的基本概念。JavaScript是一种轻量级的解释型编程语言，广泛...
标题“jquery table 合并相同列”所提及的问题正是关于如何利用 jQuery 来实现这一功能。 首先，理解需求：在表格中，如果相邻的列（column）内容相同，我们将其合并成一个单元格，只显示一次内容，这样可以使表格...
- **数据预处理**：在获取到原始数据后，我们需要对数据进行处理，找出具有相同参数的行，并记录其起始行和结束行以及需要合并的列索引。 - **自定义模板**：利用LayUI的模板语法（例如`<#...#>`），我们可以编写...
在HTML文档中使用JavaScript来自动合并表格中相同行的单元格是一种常见的前端开发技术。这种技术可以提高页面的可读性，尤其是在处理具有相同值的重复数据时。上述代码示例提供了一种简单而有效的方法来实现这一功能...
`js自动合并相同单元格Demo`是一个关于如何在JavaScript中实现动态生成表格并自动合并相同单元格的示例。这个插件尤其适用于数据量较大且存在重复信息的场景，可以有效提升表格的可读性和美观性。 首先，我们要理解...
JS table动态合并相同行,只需传入table名称，js自动合并
利用js合并table相同内容单元格并js方式自动生成，把文本内容复制进js中，应该就知道大概咋用了
总的来说，"合并相同的单元格"涉及HTML的表格结构、`colspan`和`rowspan`属性，以及可能的JavaScript处理和CSS样式调整。理解这些概念和技巧，可以帮助我们创建出符合需求的、具有高效信息展示的HTML表格。
//函数说明：合并指定表格（表格id为_w_table_id）指定列（列数为_w_table_colnum）的相同文本的相邻单元格 //参数说明：_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #...
2、有些能合并多列的，首列合并后，第二列合并单元格行数不能超过首列合并的单元格行数，虽然第二列值可能相同的行数更多。例如： 首列 第二列 a b c b c b 总之很不满意，花了一晚上时间写了一下，希望能解决大部分...
ant-design-vue + VUE3,在table中按照某一列名进行排序并将内容相同的列合并； 包含原table数据排序，重组，行合并
在Web开发中，尤其是构建数据报表时，列表多行多列合并单元格是一个常见的需求。这通常涉及到HTML、CSS和JavaScript技术的综合运用，尤其是在使用表格（table）元素展示数据时。下面将详细讲解如何实现这个功能。 ...
可以通过设置`GridView.OptionsView.ShowGroups`为`true`来启用分组功能，然后对数据源进行分组操作，GridControl会自动合并相同值的行。如果需要自定义合并规则，可以重写`GridView.OnRowCellMerge`事件，根据需求...
完成上述步骤后，运行代码，表格就会根据指定的列（这里是第一列的 `ENTERNAME` 字段）自动合并相同数据的单元格。你可以根据实际需求调整代码，以处理其他列或更多的合并逻辑。 在实际项目中，可能会有更多复杂的...
本篇将详细介绍如何使用jQuery DataTables结合JavaScript来实现相同内容单元格的动态合并。 首先，我们需要理解jQuery DataTables的基本用法。它基于jQuery库，可以通过简单的配置和API来创建高度交互的表格。要...
3. **自定义模板**：由于EasyUI默认的表格渲染可能无法直接实现相同行的合并，所以可能需要自定义列的模板（`formatter`函数），在模板中判断并合并相同数据。 4. **扩展功能**：可能涉及到EasyUI的扩展插件，例如...
在处理 HTML 表格时，我们经常会遇到需要合并相同数据的单元格以及根据需求显示或隐藏某些列的情况。例如，在报表展示或者数据汇总场景中，通过合并单元格可以使得表格更加简洁明了，而隐藏不必要的列则可以让用户更...