`

如何用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);
      }
   }
}
分享到:
评论

相关推荐

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

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

    js实现表格相同数据合并

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

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

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

    合并相同的单元格

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

    合并table的行

    3. **设置rowspan属性**:一旦遇到不同的值或到达表格的最后一行,代码会将当前行的单元格`rowspan`属性设置为`rowSpanNum`的值,即这些行被合并的实际数量。然后重置`rowSpanNum`为1,准备处理下一次可能的合并。 ...

    微信小程序表格合并demo

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

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

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

    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库或者自定义...

    李炎恢JavaScript合并版

    JavaScript是一种广泛应用于网页开发的编程语言,它的出现极大地丰富了网页的交互性,并为现代Web应用程序的发展奠定了基础。李炎恢作为在线教程的主讲教师,提供了关于JavaScript的系统学习材料。 首先,了解...

    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中的表格元素,包括但不限于创建、删除行或单元格,以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...

    JavaScript操作表格

    ### JavaScript操作表格知识点详解 #### 一、创建表格 在给定的内容中,我们首先看到了一个简单的示例,展示了如何使用JavaScript动态创建一个表格。这个过程主要包括以下几个步骤: 1. **获取容器元素**:通过`...

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

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

Global site tag (gtag.js) - Google Analytics