忘了在哪里看到的一段代码,效率不高,不过如果数据行不是很多的时候还是可以考虑一下的。
//清除空格
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);
}
}
}
分享到:
相关推荐
/* * 说明: * 表格第一列为标题列,列数以第一列为基准, * 列合并设置 : 在列元素上添加 ... * 如果整个表格中的行都要合并请设置第一列的colspans超过表格列最大值 * 的数,并且其它列取消colspans设置值 * */
按照上面的JavaScript函数逻辑,相同国家的地区值将被合并成一个单元格,从而减少表格中的重复数据展示。 需要注意的是,当自动合并单元格时,开发者应该考虑表格的可访问性和数据的逻辑性,确保合并操作不会导致...
当表格数据中存在相同参数时,我们可以将这些参数对应的单元格合并为一个,减少重复信息,增强视觉效果。下面我们将详细探讨如何操作。 1. **理解LayUI Table的基础使用** 在使用单元格合并功能前,我们需要了解...
【Vue Element实现表格相同数据列合并】 在前端开发中,我们常常需要处理表格展示数据的情况。Vue Element UI 是一个基于 Vue.js 的组件库,提供了丰富的 UI 组件,其中包括表格(el-table)。当表格中的某一列数据...
本篇文章将重点介绍如何使用JavaScript来实现表格单元格的合并功能。 #### 二、基础知识 在开始具体代码分析之前,我们需要了解一些基本概念: - **HTML 表格元素**:HTML中的`<table>`标签用于创建表格,而`<tr>...
本文将深入探讨如何使用JavaScript来实现相同内容的单元格合并。 首先,我们需要理解HTML表格的基本结构。一个表格由`<table>`元素定义,其中包含`<tr>`(行)和`<td>`(单元格)元素。如果要合并单元格,我们通常...
其中,“合并相同数据行”是一个非常实用的功能,它允许用户在不改变原有数据结构的情况下,将具有相同值的行进行合并,以提高数据展示的清晰度和美观性。 #### 实现原理及步骤详解 为了更好地理解和实现“EasyUI...
然而,当需要动态合并多个相同值的单元格时,事情会变得稍微复杂。通常,我们需要编写一些JavaScript或者使用服务器端语言(如PHP、Python等)来遍历数据,找出需要合并的单元格,并动态设置`colspan`和`rowspan`...
总之,“微信小程序表格合并demo”是一个实战性的教学示例,通过学习这个项目,开发者不仅可以掌握微信小程序的基础架构,还能了解到如何在小程序中进行数据驱动的界面构建,以及如何利用CSS和JavaScript实现复杂的...
7. **CSS样式**: 除了JavaScript代码,合并表格还可能需要CSS来调整单元格的边界和间距,使其看起来像是被合并了一样。例如,使用`display: table-cell`和`border-collapse: collapse`等样式属性。 8. **性能优化**...
例如,如果你的列表有三列,但某些情况下需要将第一列和第二列合并,那么可以先生成不合并的表格,然后根据合并规则找到需要合并的单元格,设置其`colspan`属性。 在实际应用中,可能还会遇到一些复杂情况,如: 1...
标题中提到的“合并表格行记录”,通常是指在具有相同某一列值的连续行中,合并这些行的特定单元格,保留该列的值,同时合并其他列的内容。 在描述中提到的博客链接中,可能详细介绍了如何使用jQuery来实现这个功能...
通过这个"table-rowspan表格自动合并单元格插件",开发者可以轻松地实现复杂表格布局的动态管理,提升用户体验,同时减轻了手动调整表格的繁琐工作。这个插件的使用涉及到了HTML、CSS和JavaScript的综合应用,是前端...
// 如果当前行和下一行的单元格内容相同,则隐藏下一行的单元格,并增加当前单元格的 rowSpan 属性值 table.rows[j].cells[c].style.display = 'none'; table.rows[i].cells[c].rowSpan++; } else { break; } ...
2、有些能合并多列的,首列合并后,第二列合并单元格行数不能超过首列合并的单元格行数,虽然第二列值可能相同的行数更多。例如: 首列 第二列 a b c b c b 总之很不满意,花了一晚上时间写了一下,希望能解决大部分...
主要介绍了javascript合并表格单元格实例代码,在某些应用中需要动态的合并单元格,感兴趣的朋友可以参考一下
在本项目中,"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架,它提供了响应式的数据绑定和组件化功能,...
在网页开发中,JavaScript(JS)经常用于处理各种动态效果,包括表格的处理。"JS合并表格"这个主题,涉及到的技术点主要包括HTML表格的基本结构、CSS样式控制、JavaScript操作DOM以及可能涉及到的jQuery库或者自定义...
JavaScript是一种广泛应用于网页开发的编程语言,它的出现极大地丰富了网页的交互性,并为现代Web应用程序的发展奠定了基础。李炎恢作为在线教程的主讲教师,提供了关于JavaScript的系统学习材料。 首先,了解...
在layui中,我们可以利用表格的`render`方法渲染数据,并通过JavaScript逻辑判断哪些单元格需要合并。通常,这涉及到对数据源的分析,找出需要合并的行或列。例如,如果连续几行有相同的数据,那么它们对应的单元格...