合并表格的js
<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;
}
function SpanGrid(tabObj,colIndex) {
if(tabObj != null) {
var i,j;
var intSpan;
var strTemp;
for(var m = 0; m <colIndex; m++ ){
for(i = 0; i < tabObj.rows.length; i++) {
intSpan = 1;
strTemp = tabObj.rows[i].cells[m].innerText;
for(j = i + 1; j < tabObj.rows.length; j++) {
if(strTemp == tabObj.rows[j].cells[m].innerText) {
intSpan++;
tabObj.rows[i].cells[m].rowSpan = intSpan;
tabObj.rows[j].cells[m].style.display = "none";
} else {
break;
}
}
i = j - 1;
}
}
}
}
function SpanGrid2(tabObj,colIndex) {
if(tabObj != null) {
var i,j;
var intSpan;
var strTemp;
for(i = 0; i < tabObj.rows.length; i++) {
intSpan = 1;
strTemp = tabObj.rows[i].cells[m].innerText;
for(j = i + 1; j < tabObj.rows.length; j++) {
if(strTemp == tabObj.rows[j].cells[m].innerText) {
intSpan++;
tabObj.rows[i].cells[m].rowSpan = intSpan;
tabObj.rows[j].cells[m].style.display = "none";
} else {
break;
}
}
i = j - 1;
}
}
}
</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>100</td>
<td>200</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>320</td>
</tr>
</table>
<br>
<input type="button" value="合并表格" onClick="SpanGrid(table1,2)">
</body>
</html>
分享到：
相关推荐
//函数说明：合并指定表格（表格id为_w_table_id）指定列（列数为_w_table_colnum）的相同文本的相邻单元格 //参数说明：_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #...
在给定的文件中，`test.html`可能是用来展示合并表格效果的示例页面，而`jquery-2.0.3.min.js`是jQuery库的文件，用于支持JavaScript代码。你可以通过打开`test.html`并查看源代码，学习如何在实际项目中应用上述...
以上就是利用JavaScript实现表格筛选和单元格合并的基本方法。在开发过程中，还需要注意性能优化，避免因大量DOM操作导致页面卡顿。可以考虑使用虚拟DOM技术，或者在操作大量数据时使用数组处理，减少对实际表格的...
在JavaScript编程中，合并表格相同数据列是一种常见的需求，特别是在数据展示或数据分析中。这个任务通常涉及对HTML表格（`<table>`元素）的操作，尤其是处理具有大量重复数据的列。在给定的资源中，"colm2.html"...
一个js例子实现了表格的动态合并，拆分单元格
/* * 说明: * 表格第一列为标题列,列数以第一列为基准, * 列合并设置 : 在列元素上添加 ... * 如果整个表格中的行都要合并请设置第一列的colspans超过表格列最大值 * 的数,并且其它列取消colspans设置值 * */
为了解决这一问题，WPS Office提供了使用JavaScript（简称JS）宏编程的方式来自动化合并Excel文件的功能。本文将详细介绍一个基于WPS Excel的JS宏编写的文件合并工具，帮助用户提升工作效率。 首先，这个工具的核心...
"JS合并表格"这个主题，涉及到的技术点主要包括HTML表格的基本结构、CSS样式控制、JavaScript操作DOM以及可能涉及到的jQuery库或者自定义函数。下面将详细介绍这些知识点。 首先，HTML表格是网页中展示数据的重要...
前台页面table合并单元格，可以指定合并但愿格的列数。 _w_table_lefttitle_rowspan("#evalAspectTable",1,1); 函数说明：合并指定表格（表格id为_w_table_id）指定列 （行数大于_w_table_mincolnum 小于_w_table_...
在表格合并的场景中，`index.js`通常会定义数据模型和处理与用户交互相关的事件。例如，你可能在这里定义一个二维数组来表示表格的数据结构，其中空单元格表示合并的范围。同时，当用户触发某些操作，如点击或滑动时...
类功能描述：该插件生成一个具有行合并的列表数据，合并例由开发者指定。 开发者提供已排序的数据列表以及需要合并行的列名即可，无需后端二次处理数据。 该类以纯原生JS编写，无需引入任何第三方库。 调用方法：...
本js脚本完美的实现了table单元格的合并，合并后犹如交叉表的形式，非常完美，并在其中附带例子可以验证。
在HTML文档中使用JavaScript来自动合并表格中相同行的单元格是一种常见的前端开发技术。这种技术可以提高页面的可读性，尤其是在处理具有相同值的重复数据时。上述代码示例提供了一种简单而有效的方法来实现这一功能...
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
7. **CSS样式**: 除了JavaScript代码，合并表格还可能需要CSS来调整单元格的边界和间距，使其看起来像是被合并了一样。例如，使用`display: table-cell`和`border-collapse: collapse`等样式属性。 8. **性能优化**...
本文将围绕“jquery合并表格行记录”这一主题展开，探讨如何利用jQuery实现表格数据的合并，提高数据展示的可读性。 首先，表格（Table）在网页中用于展示结构化数据，但在显示大量重复数据时，可能会显得过于冗余...
本篇文章将详细探讨如何在Bootstrap中实现表格列合并，特别是按照每四列进行合并的技巧。 首先，理解Bootstrap表格的基本结构至关重要。一个Bootstrap表格由`<table>`标签开启，内部包含`<thead>`（表头）、`...
### 表格合并table单元合并知识点详解 #### 一、表格合并的概念 表格合并是指将具有相同内容或符合特定逻辑关系的多个单元格合并为一个单元格的过程。这种操作常见于电子表格软件（如Microsoft Excel）中，但在网页...
在某些场景下，我们可能需要对表格中的单元格进行合并，以便更好地展示数据，例如汇总或者分类。本篇将详细介绍如何使用jQuery DataTables结合JavaScript来实现相同内容单元格的动态合并。 首先，我们需要理解...
`jQuery.table.rowspan.js`是一个专为解决表格中单元格自动合并问题的jQuery插件。这个插件允许开发者在前端轻松处理复杂的表格布局，提高用户体验，同时也减轻了服务器端的计算压力。 ### 插件原理 `rowspan`属性...