`

如何用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 实现Table相同行的单元格自动合并示例代码

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

    LayUiTable表单相同参数的单元格合并

    当表格数据中存在相同参数时,我们可以将这些参数对应的单元格合并为一个,减少重复信息,增强视觉效果。下面我们将详细探讨如何操作。 1. **理解LayUI Table的基础使用** 在使用单元格合并功能前,我们需要了解...

    【JavaScript源代码】Vue Elenent实现表格相同数据列合并.docx

    【Vue Element实现表格相同数据列合并】 在前端开发中,我们常常需要处理表格展示数据的情况。Vue Element UI 是一个基于 Vue.js 的组件库,提供了丰富的 UI 组件,其中包括表格(el-table)。当表格中的某一列数据...

    javascript合并单元格

    本篇文章将重点介绍如何使用JavaScript来实现表格单元格的合并功能。 #### 二、基础知识 在开始具体代码分析之前,我们需要了解一些基本概念: - **HTML 表格元素**:HTML中的`&lt;table&gt;`标签用于创建表格,而`&lt;tr&gt;...

    js合并单元格 相同内容的单元格合并

    本文将深入探讨如何使用JavaScript来实现相同内容的单元格合并。 首先,我们需要理解HTML表格的基本结构。一个表格由`&lt;table&gt;`元素定义,其中包含`&lt;tr&gt;`(行)和`&lt;td&gt;`(单元格)元素。如果要合并单元格,我们通常...

    EasyUI指定列-合并相同数据行

    其中,“合并相同数据行”是一个非常实用的功能,它允许用户在不改变原有数据结构的情况下,将具有相同值的行进行合并,以提高数据展示的清晰度和美观性。 #### 实现原理及步骤详解 为了更好地理解和实现“EasyUI...

    合并table的行

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

    合并相同的单元格

    然而,当需要动态合并多个相同值的单元格时,事情会变得稍微复杂。通常,我们需要编写一些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;...

    表格合并table单元合并

    ### 表格合并table单元合并知识点详解 #### 一、表格合并的概念 表格合并是指将具有相同内容或符合特定逻辑关系的多个单元格合并为一个单元格的过程。这种操作常见于电子表格软件(如Microsoft Excel)中,但在网页...

    EXTjs4.0以下合并表格

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

    列表多行多列合并单元格

    例如,如果你的列表有三列,但某些情况下需要将第一列和第二列合并,那么可以先生成不合并的表格,然后根据合并规则找到需要合并的单元格,设置其`colspan`属性。 在实际应用中,可能还会遇到一些复杂情况,如: 1...

    jquery合并表格行记录

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

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

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

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

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

    layui表格合并插件tableMerge

    Layui表格合并插件tableMerge是一款专为Layui框架设计的JavaScript插件,主要用于实现Web前端表格中的单元格合并功能。在Web开发中,表格是展示数据最常见的方式之一,而单元格的合并对于某些数据展示来说是必不可少...

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

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

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

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

    JAVASCRIPT自动添加表格

    本篇文章将深入探讨如何使用JavaScript自动添加、删除表格,以及实现窗口居中显示的相关技术。 首先,让我们来理解“JavaScript自动添加表格”。在HTML中,表格由`&lt;table&gt;`元素定义,行(`&lt;tr&gt;`)、列(`&lt;td&gt;`或`&lt;th&gt;`...

Global site tag (gtag.js) - Google Analytics