根据数据的内容纵向合并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水平不高,欢迎大家拍砖
分享到:
相关推荐
例如,如果某一列需要在特定行合并多个单元格,可以在`render`函数内使用`<tr>`和`<td>`元素,并根据需要设置`rowspan`和`colspan`。 此外,Vue Easytable还支持`mergeCells`配置,这允许开发者在数据层面上定义...
在表格(Table)设计中,有时我们需要合并单元格来达到特定的展示效果,例如创建标题行或列,或者为了美观和布局对齐。在HTML、CSS以及JavaScript中,都有多种方式可以实现单元格的合并。这里我们将详细探讨六种合并...
在Web开发中,尤其是构建数据报表时,列表多行多列合并单元格是一个常见的需求。这通常涉及到HTML、CSS和JavaScript技术的综合运用,尤其是在使用表格(table)元素展示数据时。下面将详细讲解如何实现这个功能。 ...
- **合并逻辑**:如果发现相邻两行的单元格内容相同,则隐藏后面的单元格,并将前面单元格的 `rowSpan` 增加 1,表示该单元格将跨越更多的行。 ##### 2. 显示与隐藏列 除了合并单元格外,还可以通过点击按钮来控制...
在JavaScript中,动态修改表格(Table)以及合并单元格是常见的需求,特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先,要动态修改表格,我们需要获取表格元素。在HTML中,表格...
一个简单的自动合并相同值单元格的例子,简单易懂
2、有些能合并多列的,首列合并后,第二列合并单元格行数不能超过首列合并的单元格行数,虽然第二列值可能相同的行数更多。例如: 首列 第二列 a b c b c b 总之很不满意,花了一晚上时间写了一下,希望能解决大部分...
因此,要实现每四列合并,我们需要找到合适的时机插入具有合适`colspan`值的单元格。 以下是一种实现方法: 1. **创建基本表格结构**:首先,创建一个基础的Bootstrap表格,确保每个`<tr>`内有四个`<td>`。 ```...
3. **单元格合并**:在网页开发中,如果需要将多个相邻的单元格合并成一个大单元格,可以使用`rowspan`和`colspan`属性。`colspan`与`rowspan`类似,但作用于列的跨度。合并单元格可以提高表格布局的复杂性和美感。 ...
该函数的目的是遍历表格的所有行,并根据列`col`中的值来判断是否需要合并相邻单元格。 该函数的工作原理是通过比较连续行中指定列的值是否相同。如果相同,那么就删除当前行的单元格,并将前一行单元格的`rowSpan`...
1. **多列合并**:除了基于单列进行合并外,还可以根据多列的组合值来决定行的合并,这需要对代码进行相应的调整,可能涉及到更复杂的比较逻辑。 2. **性能优化**:在处理大数据量时,直接在UI层进行行合并可能会...
aspose.words 控件可以方便的出来word文档,通过在word模板中定义书签,可以在指定的位置插入内容,如果需要在word中插入表格,并且表格中含有多行行头,需要合并单元时,就稍微麻烦一些,必须要注意设置单元格的...
1. **动态单元格合并**:在JasperReport中,我们可以通过设置表格列的`isStretchWithOverflow`属性为`true`,使单元格根据内容自动扩展。同时,可以使用`groupFooter`来合并分组后的行。通过编程方式或在JRXML中设置...
`会将当前单元格与下一行的同一列合并。 5. **隐藏不需要显示的单元格**:为了美观,可能需要隐藏被合并后多余的单元格。这可以通过设置TableCell的Visible属性为false来实现。 6. **注意性能**:虽然单元格合并...
用户可以选择多个单元格,然后执行“合并单元格”操作,以实现这一效果。 5. **其他表格操作**:除了上述基本功能,富文本编辑器可能还包括拆分单元格、调整行高、排序数据、设置边框样式和颜色等高级功能,以满足...
列合并是报表设计中的一个重要特性,尤其是在创建多列布局或需要对某些内容进行汇总时。 要实现JasperReport的列合并,我们主要需要关注以下几点: 1. **报表设计**:在iReport或Jaspersoft Studio这样的可视化...
例如,如果我们有一个表格,其中包含员工的姓名、性别、序号和工资卡号等字段,而每个姓名可能对应多个序号和工资卡号,这时我们就需要将相同姓名的性别合并到一行。本文将详细解释如何在IREPORT中实现这种多行某列...
合并单元格通常涉及到两个概念:行合并(rowspan)和列合并(colspan)。在Vue中,我们可以通过计算属性和条件判断来控制这些属性。 1. **行合并**:如果某一行的某些单元格需要跨多行显示,可以设置`<td>`的`...
合并单元格通常涉及到两个主要方面:行合并(rowspan)和列合并(colspan)。`rowspan`属性允许一个单元格跨多行显示,而`colspan`则可以让一个单元格跨多列显示。例如: ```html <table> 合并两行 普通单元格 ...
### Java后端生成PDF模板合并单元格表格案例详解 #### 概述 本文将详细介绍一个Java...通过对这些代码片段的深入理解,开发者不仅可以学会如何创建标准的表格,还能灵活运用单元格合并等功能,满足更多定制化的需求。