忘了在哪里看到的一段代码,效率不高,不过如果数据行不是很多的时候还是可以考虑一下的。
//清除空格
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);
}
}
}
分享到:
相关推荐
为了提升用户体验,我们可以利用JavaScript(js)以及jQuery库来实现表格相同数据的合并功能,使表格看起来更整洁、专业。 首先,我们要理解JavaScript的基本概念。JavaScript是一种轻量级的解释型编程语言,广泛...
按照上面的JavaScript函数逻辑,相同国家的地区值将被合并成一个单元格,从而减少表格中的重复数据展示。 需要注意的是,当自动合并单元格时,开发者应该考虑表格的可访问性和数据的逻辑性,确保合并操作不会导致...
然而,当需要动态合并多个相同值的单元格时,事情会变得稍微复杂。通常,我们需要编写一些JavaScript或者使用服务器端语言(如PHP、Python等)来遍历数据,找出需要合并的单元格,并动态设置`colspan`和`rowspan`...
总之,“微信小程序表格合并demo”是一个实战性的教学示例,通过学习这个项目,开发者不仅可以掌握微信小程序的基础架构,还能了解到如何在小程序中进行数据驱动的界面构建,以及如何利用CSS和JavaScript实现复杂的...
本篇文章将探讨几种在JavaScript和jQuery中实现表格行合并的方法。 首先,我们理解表格的基本结构。HTML表格由`<table>`、`<tr>`(行)、`<td>`(单元格)和`<th>`(表头单元格)等元素构成。行合并通常涉及到`<td>...
7. **CSS样式**: 除了JavaScript代码,合并表格还可能需要CSS来调整单元格的边界和间距,使其看起来像是被合并了一样。例如,使用`display: table-cell`和`border-collapse: collapse`等样式属性。 8. **性能优化**...
通过这个"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库或者自定义...
例如,可以遍历表格,将相同值的单元格内容合并。 在提供的文件列表中,`index.html`可能是包含HTML代码的主文件,`css`可能包含样式表,`img`可能存储与表格相关的图像资源,而`js`文件则包含了实现展开合并功能的...
这篇博文"JavaScript控制表格换色"将探讨如何使用JavaScript实现这一功能。 首先,我们要理解HTML表格的基本结构。一个基本的HTML表格由`<table>`元素定义,`<tr>`表示行,`<th>`表示表头,`<td>`表示单元格。我们...
在探讨“javascript表格操作”的知识点时,我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素,包括但不限于创建、删除行或单元格,以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...
综上所述,"仿Excel合并单元格实例点击合并表格单元格"是一个融合了JavaScript编程、DOM操作、事件处理、CSS样式设计、数据管理和性能优化等多个技术领域的项目。通过学习和实践这样的实例,开发者不仅可以提升自己...
在JavaScript编程中,修改表格(Table)信息并更新数据库是一个常见的需求,特别是在Web应用程序中,用户可能需要编辑数据显示,然后将这些更改同步到后端存储。这个“非常实用的JAVASCRIPT修改表格信息,然后更新...
Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript ...
javascript动态排序表格 javascript动态排序表格 javascript动态排序表格 javascript动态排序表格