忘了在哪里看到的一段代码,效率不高,不过如果数据行不是很多的时候还是可以考虑一下的。
//清除空格
String.prototype.Trim = function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
String.prototype.LTrim = function(){
return this.replace(/(^\s*)/g, "");
}
String.prototype.RTrim = function(){
return this.replace(/(\s*$)/g, "");
}
/*合并相同值的行
@tbl :要合并的表格对象
@cellIndex:要合并的列
*/
function MergeCellsVertical(tbl,cellIndex) {
//如果表格行数少于两行,直接返回
if (tbl.rows.length < 2) return;
var i,j;
var last = tbl.rows(0).cells(cellIndex).innerHTML;
var lastIndex = 0;
for(i = 1; i < tbl.rows.length; i++) {
//发现新的值
if(tbl.rows(i).cells(cellIndex).innerHTML != last)
{
if(i > lastIndex + 1)
{
for(j = lastIndex+1; j < i; j++)
{
tbl.rows(j).cells(cellIndex).removeNode();
}
tbl.rows(lastIndex).cells(cellIndex).rowSpan = i-lastIndex;
}
last = tbl.rows(i).cells(cellIndex).innerHTML;
lastIndex = i;
}
}
//最后一行要特别处理
if(lastIndex != tbl.rows.length - 1)
{
for(j = lastIndex + 1; j < tbl.rows.length; j++)
{
tbl.rows(j).cells(cellIndex).removeNode();
}
tbl.rows(lastIndex).cells(cellIndex).rowSpan = tbl.rows.length - lastIndex + 1;
}
}
//页面onload的时候调用这个函数
function loadFinish(){
var tbl=document.getElementById("tblSearch");
for(var i=tbl.rows[0].cells.length;i>0;i--){
var td=tbl.rows[0].cells[i-1].innerText.Trim();
//合并表格列名为"日期"和"医生姓名"两列
if(td=='日期'||td=='医生姓名'){
MergeCellsVertical(tblSearch,i-1);
}
}
}
分享到:
相关推荐
合并表格中具有相同内容的单元格是数据展示和排版中常见的需求,尤其在表格数据量较大时,通过合并相同的单元格可以使表格看起来更加简洁、易于理解。在Web开发中,尤其是在使用HTML和JavaScript进行网页设计时,...
为了提升用户体验,我们可以利用JavaScript(js)以及jQuery库来实现表格相同数据的合并功能,使表格看起来更整洁、专业。 首先,我们要理解JavaScript的基本概念。JavaScript是一种轻量级的解释型编程语言,广泛...
按照上面的JavaScript函数逻辑,相同国家的地区值将被合并成一个单元格,从而减少表格中的重复数据展示。 需要注意的是,当自动合并单元格时,开发者应该考虑表格的可访问性和数据的逻辑性,确保合并操作不会导致...
然而,当需要动态合并多个相同值的单元格时,事情会变得稍微复杂。通常,我们需要编写一些JavaScript或者使用服务器端语言(如PHP、Python等)来遍历数据,找出需要合并的单元格,并动态设置`colspan`和`rowspan`...
3. **设置rowspan属性**:一旦遇到不同的值或到达表格的最后一行,代码会将当前行的单元格`rowspan`属性设置为`rowSpanNum`的值,即这些行被合并的实际数量。然后重置`rowSpanNum`为1,准备处理下一次可能的合并。 ...
总之,“微信小程序表格合并demo”是一个实战性的教学示例,通过学习这个项目,开发者不仅可以掌握微信小程序的基础架构,还能了解到如何在小程序中进行数据驱动的界面构建,以及如何利用CSS和JavaScript实现复杂的...
本篇文章将探讨几种在JavaScript和jQuery中实现表格行合并的方法。 首先,我们理解表格的基本结构。HTML表格由`<table>`、`<tr>`(行)、`<td>`(单元格)和`<th>`(表头单元格)等元素构成。行合并通常涉及到`<td>...
通过这个"table-rowspan表格自动合并单元格插件",开发者可以轻松地实现复杂表格布局的动态管理,提升用户体验,同时减轻了手动调整表格的繁琐工作。这个插件的使用涉及到了HTML、CSS和JavaScript的综合应用,是前端...
标题中提到的“合并表格行记录”,通常是指在具有相同某一列值的连续行中,合并这些行的特定单元格,保留该列的值,同时合并其他列的内容。 在描述中提到的博客链接中,可能详细介绍了如何使用jQuery来实现这个功能...
// 如果当前行和下一行的单元格内容相同,则隐藏下一行的单元格,并增加当前单元格的 rowSpan 属性值 table.rows[j].cells[c].style.display = 'none'; table.rows[i].cells[c].rowSpan++; } else { break; } ...
JavaScript 合并压缩的 JSP Tag 实现是一个常见的前端优化技术,主要目的是为了减少网络请求次数,提升网页加载速度。在网页开发中,通常会有多份 JavaScript 文件,每份文件都对应一个网络请求,这会增加页面加载...
主要介绍了javascript合并表格单元格实例代码,在某些应用中需要动态的合并单元格,感兴趣的朋友可以参考一下
在本项目中,"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架,它提供了响应式的数据绑定和组件化功能,...
在网页开发中,JavaScript(JS)经常用于处理各种动态效果,包括表格的处理。"JS合并表格"这个主题,涉及到的技术点主要包括HTML表格的基本结构、CSS样式控制、JavaScript操作DOM以及可能涉及到的jQuery库或者自定义...
JavaScript是一种广泛应用于网页开发的编程语言,它的出现极大地丰富了网页的交互性,并为现代Web应用程序的发展奠定了基础。李炎恢作为在线教程的主讲教师,提供了关于JavaScript的系统学习材料。 首先,了解...
例如,可以遍历表格,将相同值的单元格内容合并。 在提供的文件列表中,`index.html`可能是包含HTML代码的主文件,`css`可能包含样式表,`img`可能存储与表格相关的图像资源,而`js`文件则包含了实现展开合并功能的...
这篇博文"JavaScript控制表格换色"将探讨如何使用JavaScript实现这一功能。 首先,我们要理解HTML表格的基本结构。一个基本的HTML表格由`<table>`元素定义,`<tr>`表示行,`<th>`表示表头,`<td>`表示单元格。我们...
在探讨“javascript表格操作”的知识点时,我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素,包括但不限于创建、删除行或单元格,以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...
### JavaScript操作表格知识点详解 #### 一、创建表格 在给定的内容中,我们首先看到了一个简单的示例,展示了如何使用JavaScript动态创建一个表格。这个过程主要包括以下几个步骤: 1. **获取容器元素**:通过`...
综上所述,"仿Excel合并单元格实例点击合并表格单元格"是一个融合了JavaScript编程、DOM操作、事件处理、CSS样式设计、数据管理和性能优化等多个技术领域的项目。通过学习和实践这样的实例,开发者不仅可以提升自己...