`
zhanghw0917
  • 浏览: 185631 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

javascript 合并相同表格

    博客分类:
  • web
阅读更多
function mergerTd(tableId,rowNum){
	var tableObj = document.getElementById(tableId);
	var rowsObj = tableObj.rows;
	var rowIndex = rowsObj.length;
	var baseRowNum = 0;
	var mergerLength = 0;
	var textStr = "";
	for(var i=0;i<rowIndex;i++){
		var cellsObj = rowsObj[i].cells;
		if(rowsObj[i].cells[rowNum] && rowsObj[i].cells[rowNum].innerHTML){
			var rowSpanLength = rowsObj[i].cells[rowNum].rowSpan;
			if(rowSpanLength && rowSpanLength > 1){
				i=i+rowSpanLength-1;
			}
			if(cellsObj[rowNum].innerText == textStr){
				if(rowSpanLength && rowSpanLength > 1){
					mergerLength=mergerLength+rowSpanLength
				}else{
					mergerLength++;
				}
			}else{
				if(mergerLength > 0){
					rowsObj[baseRowNum].cells[rowNum].rowSpan = mergerLength+1;
					for(var j=1;j<=mergerLength;j++){
						rowsObj[baseRowNum+j].cells[rowNum].style.display = "none";
					}
				}
				baseRowNum = i;
				mergerLength = 0;
				textStr = cellsObj[rowNum].innerText;
			}
		}		
	}
	if(mergerLength > 0){
		rowsObj[baseRowNum].cells[rowNum].rowSpan = mergerLength+1;
		for(var j=1;j<=mergerLength;j++){
			rowsObj[baseRowNum+j].cells[rowNum].style.display = "none";
		}
	}
}

 

分享到:
评论

相关推荐

    js实现表格相同数据合并

    为了提升用户体验,我们可以利用JavaScript(js)以及jQuery库来实现表格相同数据的合并功能,使表格看起来更整洁、专业。 首先,我们要理解JavaScript的基本概念。JavaScript是一种轻量级的解释型编程语言,广泛...

    js合并表格相同数据列

    在JavaScript编程中,合并表格相同数据列是一种常见的需求,特别是在数据展示或数据分析中。这个任务通常涉及对HTML表格(`&lt;table&gt;`元素)的操作,尤其是处理具有大量重复数据的列。在给定的资源中,"colm2.html"...

    javascript实现筛选、合并表格

    以上就是利用JavaScript实现表格筛选和单元格合并的基本方法。在开发过程中,还需要注意性能优化,避免因大量DOM操作导致页面卡顿。可以考虑使用虚拟DOM技术,或者在操作大量数据时使用数组处理,减少对实际表格的...

    Javascript合并表格中具有相同内容单元格示例

    合并表格中具有相同内容的单元格是数据展示和排版中常见的需求,尤其在表格数据量较大时,通过合并相同的单元格可以使表格看起来更加简洁、易于理解。在Web开发中,尤其是在使用HTML和JavaScript进行网页设计时,...

    【JavaScript源代码】Vue Elenent实现表格相同数据列合并.docx

    完成上述步骤后,运行代码,表格就会根据指定的列(这里是第一列的 `ENTERNAME` 字段)自动合并相同数据的单元格。你可以根据实际需求调整代码,以处理其他列或更多的合并逻辑。 在实际项目中,可能会有更多复杂的...

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

    在HTML文档中使用JavaScript来自动合并表格中相同行的单元格是一种常见的前端开发技术。这种技术可以提高页面的可读性,尤其是在处理具有相同值的重复数据时。上述代码示例提供了一种简单而有效的方法来实现这一功能...

    微信小程序表格合并demo

    总之,“微信小程序表格合并demo”是一个实战性的教学示例,通过学习这个项目,开发者不仅可以掌握微信小程序的基础架构,还能了解到如何在小程序中进行数据驱动的界面构建,以及如何利用CSS和JavaScript实现复杂的...

    LayUiTable表单相同参数的单元格合并

    当表格数据中存在相同参数时,我们可以将这些参数对应的单元格合并为一个,减少重复信息,增强视觉效果。下面我们将详细探讨如何操作。 1. **理解LayUI Table的基础使用** 在使用单元格合并功能前,我们需要了解...

    EasyUI指定列-合并相同数据行

    ### EasyUI指定列-合并相同数据行 #### 易理解释与应用场景 在日常的数据处理过程中,经常会遇到需要对表格中的重复数据进行整理的情况。EasyUI作为一种轻量级的用户界面库,提供了丰富的功能来帮助开发者高效地...

    javascript合并单元格

    本篇文章将重点介绍如何使用JavaScript来实现表格单元格的合并功能。 #### 二、基础知识 在开始具体代码分析之前,我们需要了解一些基本概念: - **HTML 表格元素**:HTML中的`&lt;table&gt;`标签用于创建表格,而`&lt;tr&gt;...

    js自动合并相同单元格Demo

    `js自动合并相同单元格Demo`是一个关于如何在JavaScript中实现动态生成表格并自动合并相同单元格的示例。这个插件尤其适用于数据量较大且存在重复信息的场景,可以有效提升表格的可读性和美观性。 首先,我们要理解...

    合并相同的单元格

    总的来说,"合并相同的单元格"涉及HTML的表格结构、`colspan`和`rowspan`属性,以及可能的JavaScript处理和CSS样式调整。理解这些概念和技巧,可以帮助我们创建出符合需求的、具有高效信息展示的HTML表格。

    表格合并table单元合并

    表格合并是指将具有相同内容或符合特定逻辑关系的多个单元格合并为一个单元格的过程。这种操作常见于电子表格软件(如Microsoft Excel)中,但在网页开发中也经常用到,特别是对于动态生成或需要特殊布局的表格。 #...

    EXTjs4.0以下合并表格

    7. **CSS样式**: 除了JavaScript代码,合并表格还可能需要CSS来调整单元格的边界和间距,使其看起来像是被合并了一样。例如,使用`display: table-cell`和`border-collapse: collapse`等样式属性。 8. **性能优化**...

    列表多行多列合并单元格

    综上所述,实现列表多行多列合并单元格涉及到HTML表格的基本操作,以及JavaScript动态计算和设置`colspan`和`rowspan`属性。在开发过程中,还需要考虑交互性、响应式设计和性能优化,确保在各种环境下都能提供良好的...

    基于jQuery的合并表格中相同文本的相邻单元格的代码

    在网页开发中,经常需要处理表格数据,尤其是在展示大量重复信息时,为了提高数据可读性,通常会采用合并相同内容的单元格来减少冗余。jQuery是一个强大的JavaScript库,可以帮助开发者轻松实现这样的功能。本篇文章...

    jquery合并表格行记录

    为了解决这个问题,我们常常需要合并相同的行或列,尤其是对于报表和统计表。标题中提到的“合并表格行记录”,通常是指在具有相同某一列值的连续行中,合并这些行的特定单元格,保留该列的值,同时合并其他列的内容...

    合并table的行

    当面对大量重复或相似的数据时,合并表格行的功能可以极大地提升数据展示的清晰度和用户体验。本文将深入探讨如何实现“合并table的行”这一功能,以及其背后的原理与应用场景。 ### 合并table的行:原理与实现 在...

    easyui合并相同行

    标题中的“easyui合并相同行”指的是在使用EasyUI框架进行前端开发时,处理数据表格中存在相同行的情况。EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的组件和样式,帮助开发者快速构建用户界面。在数据...

Global site tag (gtag.js) - Google Analytics