`

如何用javascript合并表格相同值的行

阅读更多
忘了在哪里看到的一段代码,效率不高,不过如果数据行不是很多的时候还是可以考虑一下的。

//清除空格
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);
      }
   }
}
分享到:
评论

相关推荐

    js实现表格相同数据合并

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

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

    按照上面的JavaScript函数逻辑,相同国家的地区值将被合并成一个单元格,从而减少表格中的重复数据展示。 需要注意的是,当自动合并单元格时,开发者应该考虑表格的可访问性和数据的逻辑性,确保合并操作不会导致...

    合并相同的单元格

    然而,当需要动态合并多个相同值的单元格时,事情会变得稍微复杂。通常,我们需要编写一些JavaScript或者使用服务器端语言(如PHP、Python等)来遍历数据,找出需要合并的单元格,并动态设置`colspan`和`rowspan`...

    微信小程序表格合并demo

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

    表格行合并的几种做法(javascript jQuery)

    本篇文章将探讨几种在JavaScript和jQuery中实现表格行合并的方法。 首先,我们理解表格的基本结构。HTML表格由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;td&gt;`(单元格)和`&lt;th&gt;`(表头单元格)等元素构成。行合并通常涉及到`&lt;td&gt;...

    EXTjs4.0以下合并表格

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

    table-rowspan表格自动合并单元格插件

    通过这个"table-rowspan表格自动合并单元格插件",开发者可以轻松地实现复杂表格布局的动态管理,提升用户体验,同时减轻了手动调整表格的繁琐工作。这个插件的使用涉及到了HTML、CSS和JavaScript的综合应用,是前端...

    jquery合并表格行记录

    标题中提到的“合并表格行记录”,通常是指在具有相同某一列值的连续行中,合并这些行的特定单元格,保留该列的值,同时合并其他列的内容。 在描述中提到的博客链接中,可能详细介绍了如何使用jQuery来实现这个功能...

    javascript万能table合并单元格,隐藏列 html版

    // 如果当前行和下一行的单元格内容相同,则隐藏下一行的单元格,并增加当前单元格的 rowSpan 属性值 table.rows[j].cells[c].style.display = 'none'; table.rows[i].cells[c].rowSpan++; } else { break; } ...

    javascript合并压缩的jsp tag实现

    JavaScript 合并压缩的 JSP Tag 实现是一个常见的前端优化技术,主要目的是为了减少网络请求次数,提升网页加载速度。在网页开发中,通常会有多份 JavaScript 文件,每份文件都对应一个网络请求,这会增加页面加载...

    javascript合并表格单元格实例代码

    主要介绍了javascript合并表格单元格实例代码,在某些应用中需要动态的合并单元格,感兴趣的朋友可以参考一下

    vue+elementUI实现动态表格合并单元格.zip

    在本项目中,"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架,它提供了响应式的数据绑定和组件化功能,...

    JS合并表格

    在网页开发中,JavaScript(JS)经常用于处理各种动态效果,包括表格的处理。"JS合并表格"这个主题,涉及到的技术点主要包括HTML表格的基本结构、CSS样式控制、JavaScript操作DOM以及可能涉及到的jQuery库或者自定义...

    jquery表格展开合并

    例如,可以遍历表格,将相同值的单元格内容合并。 在提供的文件列表中,`index.html`可能是包含HTML代码的主文件,`css`可能包含样式表,`img`可能存储与表格相关的图像资源,而`js`文件则包含了实现展开合并功能的...

    JavaScript控制表格换色

    这篇博文"JavaScript控制表格换色"将探讨如何使用JavaScript实现这一功能。 首先,我们要理解HTML表格的基本结构。一个基本的HTML表格由`&lt;table&gt;`元素定义,`&lt;tr&gt;`表示行,`&lt;th&gt;`表示表头,`&lt;td&gt;`表示单元格。我们...

    javascript表格操作

    在探讨“javascript表格操作”的知识点时,我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素,包括但不限于创建、删除行或单元格,以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...

    仿Excel合并单元格实例点击合并表格单元格.zip

    综上所述,"仿Excel合并单元格实例点击合并表格单元格"是一个融合了JavaScript编程、DOM操作、事件处理、CSS样式设计、数据管理和性能优化等多个技术领域的项目。通过学习和实践这样的实例,开发者不仅可以提升自己...

    非常实用的JAVASCRIPT修改表格信息,然后更新数据库汇总

    在JavaScript编程中,修改表格(Table)信息并更新数据库是一个常见的需求,特别是在Web应用程序中,用户可能需要编辑数据显示,然后将这些更改同步到后端存储。这个“非常实用的JAVASCRIPT修改表格信息,然后更新...

    高性能网页JavaScriptCanvas电子表格系统源码.zip

    Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript ...

    javascript排序表格

    javascript动态排序表格 javascript动态排序表格 javascript动态排序表格 javascript动态排序表格

Global site tag (gtag.js) - Google Analytics