`
zhsq_java
  • 浏览: 61848 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

根据内容合并table的单元格,支持多列的合并

    博客分类:
  • JS
阅读更多
根据数据的内容纵向合并table里面的td,多列树状合并最后一个参数数组里面多写上几个列号就可以了,几列不相关,各合并各的就多调用几次吧。
//tbl:table对应的dom元素,
//beginRow:从第几行开始合并(从0开始),
//endRow:合并到哪一行,负数表示从底下数几行不合并
//colIdxes:合并的列下标的数组,如[0,1]表示合并前两列,[0]表示只合并第一列
function mergeSameCell(tbl,beginRow,endRow,colIdxes){
	var colIdx = colIdxes[0];
	var newColIdxes = colIdxes.concat();
	newColIdxes.splice(0,1)
	var delRows = new Array();
	var rs = tbl.rows;
	//endRow为0的时候合并到最后一行,小于0时表示最后有-endRow行不合并
	if(endRow === 0){
		endRow = rs.length - 1;
	}else if(endRow < 0){
		endRow = rs.length - 1 + endRow;
	}
	var rowSpan = 1; //要设置的rowSpan的值
	var rowIdx = beginRow; //要设置rowSpan的cell行下标
	var cellValue; //存储单元格里面的内容
	for(var i=beginRow; i<= endRow + 1; i++){
		if(i === endRow + 1){//过了最后一行的时候合并前面的单元格
			if(newColIdxes.length > 0){
				mergeSameCell(tbl,rowIdx,endRow,newColIdxes);
			}
			rs[rowIdx].cells[colIdx].rowSpan = rowSpan;
		}else{
			var cell = rs[i].cells[colIdx];
			if(i === beginRow){//第一行的时候初始化各个参数
				cellValue = cell.innerHTML;
				rowSpan = 1;
				rowIdx = i;
			}else if(cellValue != cell.innerHTML){//数据改变合并前面的单元格
				cellValue = cell.innerHTML;
				if(newColIdxes.length > 0){
					mergeSameCell(tbl,rowIdx,i - 1,newColIdxes);
				}
				rs[rowIdx].cells[colIdx].rowSpan = rowSpan;
				rowSpan = 1;
				rowIdx = i;
			}else if(cellValue === cell.innerHTML){//数据和前面的数据重复的时候删除单元格
				rowSpan++;
				delRows.push(i);
			}
		}
	}
	for(var j=0;j<delRows.length; j++){
		rs[delRows[j]].deleteCell(colIdx);
	}
}

//调用
mergeSameCell(document.getElementById('tableTbl'),1,-1,[0,1]);

花了整整一下午写出来的 ,js水平不高,欢迎大家拍砖
分享到:
评论

相关推荐

    vue-easytable合并单元格

    例如,如果某一列需要在特定行合并多个单元格,可以在`render`函数内使用`&lt;tr&gt;`和`&lt;td&gt;`元素,并根据需要设置`rowspan`和`colspan`。 此外,Vue Easytable还支持`mergeCells`配置,这允许开发者在数据层面上定义...

    table合并单元格的多种方法

    在表格(Table)设计中,有时我们需要合并单元格来达到特定的展示效果,例如创建标题行或列,或者为了美观和布局对齐。在HTML、CSS以及JavaScript中,都有多种方式可以实现单元格的合并。这里我们将详细探讨六种合并...

    列表多行多列合并单元格

    在Web开发中,尤其是构建数据报表时,列表多行多列合并单元格是一个常见的需求。这通常涉及到HTML、CSS和JavaScript技术的综合运用,尤其是在使用表格(table)元素展示数据时。下面将详细讲解如何实现这个功能。 ...

    javascript万能table合并单元格,隐藏列 html版

    - **合并逻辑**:如果发现相邻两行的单元格内容相同,则隐藏后面的单元格,并将前面单元格的 `rowSpan` 增加 1,表示该单元格将跨越更多的行。 ##### 2. 显示与隐藏列 除了合并单元格外,还可以通过点击按钮来控制...

    JS实现动态修改table及合并单元格的方法示例

    在JavaScript中,动态修改表格(Table)以及合并单元格是常见的需求,特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先,要动态修改表格,我们需要获取表格元素。在HTML中,表格...

    table自动合并相同值得单元格的例子

    一个简单的自动合并相同值单元格的例子,简单易懂

    JS TABLE CELL 相同内容 单元格 合并

    2、有些能合并多列的,首列合并后,第二列合并单元格行数不能超过首列合并的单元格行数,虽然第二列值可能相同的行数更多。例如: 首列 第二列 a b c b c b 总之很不满意,花了一晚上时间写了一下,希望能解决大部分...

    bootstrap表格列合并

    因此,要实现每四列合并,我们需要找到合适的时机插入具有合适`colspan`值的单元格。 以下是一种实现方法: 1. **创建基本表格结构**:首先,创建一个基础的Bootstrap表格,确保每个`&lt;tr&gt;`内有四个`&lt;td&gt;`。 ```...

    table-rowspan表格自动合并单元格插件

    3. **单元格合并**:在网页开发中,如果需要将多个相邻的单元格合并成一个大单元格,可以使用`rowspan`和`colspan`属性。`colspan`与`rowspan`类似,但作用于列的跨度。合并单元格可以提高表格布局的复杂性和美感。 ...

    JS 实现Table相同行的单元格自动合并示例代码

    该函数的目的是遍历表格的所有行,并根据列`col`中的值来判断是否需要合并相邻单元格。 该函数的工作原理是通过比较连续行中指定列的值是否相同。如果相同,那么就删除当前行的单元格,并将前一行单元格的`rowSpan`...

    合并table的行

    1. **多列合并**:除了基于单列进行合并外,还可以根据多列的组合值来决定行的合并,这需要对代码进行相应的调整,可能涉及到更复杂的比较逻辑。 2. **性能优化**:在处理大数据量时,直接在UI层进行行合并可能会...

    aspose.words table 多行单元格合并

    aspose.words 控件可以方便的出来word文档,通过在word模板中定义书签,可以在指定的位置插入内容,如果需要在word中插入表格,并且表格中含有多行行头,需要合并单元时,就稍微麻烦一些,必须要注意设置单元格的...

    基于Jasperreport动态单元格合并模板

    1. **动态单元格合并**:在JasperReport中,我们可以通过设置表格列的`isStretchWithOverflow`属性为`true`,使单元格根据内容自动扩展。同时,可以使用`groupFooter`来合并分组后的行。通过编程方式或在JRXML中设置...

    GridView中单元格合并

    `会将当前单元格与下一行的同一列合并。 5. **隐藏不需要显示的单元格**:为了美观,可能需要隐藏被合并后多余的单元格。这可以通过设置TableCell的Visible属性为false来实现。 6. **注意性能**:虽然单元格合并...

    富文本编辑器以及表格操作,可拉伸单元格宽度、增加行、增加列、合并单元格

    用户可以选择多个单元格,然后执行“合并单元格”操作,以实现这一效果。 5. **其他表格操作**:除了上述基本功能,富文本编辑器可能还包括拆分单元格、调整行高、排序数据、设置边框样式和颜色等高级功能,以满足...

    jasperreport列合并

    列合并是报表设计中的一个重要特性,尤其是在创建多列布局或需要对某些内容进行汇总时。 要实现JasperReport的列合并,我们主要需要关注以下几点: 1. **报表设计**:在iReport或Jaspersoft Studio这样的可视化...

    IREPORT中多行某列数据的合并

    例如,如果我们有一个表格,其中包含员工的姓名、性别、序号和工资卡号等字段,而每个姓名可能对应多个序号和工资卡号,这时我们就需要将相同姓名的性别合并到一行。本文将详细解释如何在IREPORT中实现这种多行某列...

    vue合并单元格

    合并单元格通常涉及到两个概念:行合并(rowspan)和列合并(colspan)。在Vue中,我们可以通过计算属性和条件判断来控制这些属性。 1. **行合并**:如果某一行的某些单元格需要跨多行显示,可以设置`&lt;td&gt;`的`...

    jQuery实现合并单元格功能

    合并单元格通常涉及到两个主要方面:行合并(rowspan)和列合并(colspan)。`rowspan`属性允许一个单元格跨多行显示,而`colspan`则可以让一个单元格跨多列显示。例如: ```html &lt;table&gt; 合并两行 普通单元格 ...

    java 后端生成pdf模板合并单元格表格的案例.docx

    ### Java后端生成PDF模板合并单元格表格案例详解 #### 概述 本文将详细介绍一个Java...通过对这些代码片段的深入理解,开发者不仅可以学会如何创建标准的表格,还能灵活运用单元格合并等功能,满足更多定制化的需求。

Global site tag (gtag.js) - Google Analytics