`
zengzehui
  • 浏览: 6159 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

javascript table单元格纵向合并和合并还原

阅读更多

合并思路如下:

       1、根据单元格内容或单元格属性找出需要合并的单元格

       2、修改起始单元格colspan值

       3、删除多余的单元格

单元格合并代码如下:

/************************************* table单元格合并 ***********************************************
  合并指定table 指定列 相同数据的单元格 table:table对象  colInx:需要合并的列的index columns:table总列数
  opts:{columns:总列数,skipNull:是否忽略空单元格的合并 mergeAttrName }
 **********************************************************************************************/
 mergeTalbeVCells = function(table,colInx,opts){
   var option = {skipNull:false};
   $.extend(option,opts);
        var cols = option.columns || table.rows[0].cells.length;
  var colArr = [];
  var rows = table.rows.length;
  var n = 1;
  for(var i=0;i<rows;i++){
   var currtxt = '';
   if(option.mergeAttrName){
    currtxt = table.rows[i].cells[colInx - (cols - table.rows[i].cells.length)].getAttribute(option.mergeAttrName);
   }else{
    currtxt = table.rows[i].cells[colInx - (cols - table.rows[i].cells.length)].innerText;
   }
   var nexttxt;
   if(i < rows-1){
    if(option.mergeAttrName){
     nexttxt = table.rows[i+1].cells[colInx - (cols - table.rows[i+1].cells.length)].getAttribute(option.mergeAttrName);
    }else{
     nexttxt = table.rows[i+1].cells[colInx - (cols - table.rows[i+1].cells.length)].innerText;
    }
   }else{
    colArr[colArr.length] = {rowInx:((i+1)-n),rowSpan:n};
   }
   if(currtxt != nexttxt){
    colArr[colArr.length] = {rowInx:(i-n+1),rowSpan:n};
    n = 0;
   }else if(currtxt=="" && nexttxt==""){
    //  是否忽略空字符
    if(option.skipNull){
     colArr[colArr.length] = {rowInx:0,rowSpan:1};
     n = 0;
    }
   }
   n++;
  }
  // 合并相同数据的单元格
  for(var i=0;i<colArr.length;i++){
   table.rows[colArr[i].rowInx].cells[colInx - (cols - table.rows[colArr[i].rowInx].cells.length)].rowSpan = colArr[i].rowSpan;
   for(var j=1;j<colArr[i].rowSpan;j++){
    table.rows[colArr[i].rowInx*1+j].deleteCell(colInx - (cols - table.rows[colArr[i].rowInx*1+j].cells.length));
   }
  }
}

 还原合并代码如下:

 

/******* 还原合并 *******/
 var restoreMergeTable = function(table,colInx,opts){
  var option = {skipNull:false};
  $.extend(option,opts);
  var cols = option.columns || table.rows[0].cells.length;
  var colArr = [];
  var rows = table.rows.length;
  var n = 1;
  for(var i=0;i<rows;i++){
   var cell = getCellByColInx(table.rows[i],colInx);
   if(!cell) continue;
   var rowSpan = cell.getAttribute("rowSpan");
   if(rowSpan<2) continue;
   for(var ri=1;ri<rowSpan;ri++){
     copyCell(table.rows[i+ri].insertCell(0),cell,_this.option.userDatas);
   }
   cell.rowSpan = 1;
  }
 

  /************** 复制单元格 **************/
  function copyCell(res_cell,target_cell,attributes){
   res_cell.innerHTML = target_cell.innerHTML;
   if(attributes){
    for(var i=0,len=attributes.length;i<len;i++){
     res_cell.setAttribute(attributes[i],target_cell.getAttribute(attributes[i]));
    }
   }
   res_cell.setAttribute("columnId",target_cell.getAttribute("columnId"));
    }
 }

分享到:
评论

相关推荐

    列表多行多列合并单元格

    2. `rowspan`属性:这个属性用于指定一个单元格纵向跨越的行数。例如,`&lt;td rowspan="2"&gt;`表示该单元格将占据两行的高度。 当处理动态生成的数据时,比如从服务器获取的列表数据,可能需要在JavaScript中动态设置`...

    微信小程序表格合并demo

    在表格合并的场景下,你可能需要用到CSS的`display: table`、`display: table-cell`等属性来布局表格,同时设置单元格的宽度、高度以及边框等样式。对于合并的单元格,可能需要设置特殊的样式,比如隐藏不需要显示的...

    js 合并单元格2例

    2. rowspan属性:同样,`rowspan`属性则表示该单元格纵向跨越的行数。例如,`rowspan="2"`表示该单元格将占用2行的空间。 三、实例分析 在"合并table的单元格"示例中,我们可以看到以下两种合并方法的应用: 1. ...

    合并相同的单元格

    `colspan`定义了单元格横向合并的列数,而`rowspan`则定义了纵向合并的行数。例如: ```html &lt;table&gt; 这是合并两列的单元格 这是合并两行的单元格 正常单元格 正常单元格 &lt;/table&gt; ``` 在这个例子...

    jsp合并单元格

    `colspan`定义了单元格横向跨越的列数,而`rowspan`则定义了单元格纵向跨越的行数。下面将详细解释如何在JSP中实现这个功能。 1. **HTML基础**: 在JSP中,我们首先需要创建一个HTML表格结构,包括`&lt;table&gt;`、`...

    JQuery实现表格中相同单元格合并示例代码

    单元格合并通常通过`colspan`和`rowspan`属性实现,`colspan`用于横向合并单元格,而`rowspan`用于纵向合并单元格。 #### 三、JQuery遍历表格和处理单元格 在示例代码中,通过`$("#tbl").find("tr")`获取表格中...

    js对table的td进行相同内容合并示例详解

    我们可以通过改变td的rowspan属性来实现横向合并,或者改变td的colspan属性来实现纵向合并。在本例中,我们将关注如何通过js实现横向合并相同内容的单元格。 我们可以通过以下步骤来实现: 1. 首先,确定需要处理...

    htmlday2笔记

    例如,`colspan="3"`将一个单元格横向合并为3列,`rowspan="2"`则将单元格纵向合并为2行。 最后,我们提到了链接标签`&lt;a&gt;`,用于创建超链接。`href`属性指定链接的目标地址,`target`定义打开链接的方式(默认在原...

    js操作table元素实现表格行列新增、删除技巧总结

    `conbainTableRow`方法用于纵向合并内容相同的单元格,传入的是表格对象以及需要合并的列数。此外,还有一个可选参数用于指定从哪一行开始合并。而`combineCell`方法则是用于横向合并单元格,它需要一个单元格对象...

    Javascript实现简单人机五子棋

    通过`&lt;table&gt;`标签和`&lt;tr&gt;`、`&lt;td&gt;`标签构建棋盘,使用CSS设置样式以达到视觉效果。 二、CSS美化 CSS用于定义页面样式,使游戏界面更美观。通过设置棋盘单元格的宽高、边框、背景色等属性,可以创建出清晰的棋盘...

    javascript实现的五子棋人机对战游戏源码

    HTML标记语言用于定义页面内容和结构,如棋盘的表格元素 `&lt;table&gt;` 和棋子图片的 `&lt;img&gt;` 标签。 3. **CSS样式**:虽然源代码中没有明确提到CSS文件,但通常HTML页面会结合CSS来设定元素样式,如棋盘的大小、颜色,...

    wuziqi.rar_javascript_五子棋

    通常,我们会使用`&lt;table&gt;`元素来创建一个棋盘网格,每个单元格(`&lt;td&gt;`)代表棋盘上的一个位置。棋盘大小一般设定为15x15,可以通过CSS设置样式以适应不同屏幕尺寸。 三、JavaScript实现棋盘 1. 数据结构:为了...

    javascript简单实现表格行间隔显示颜色并高亮显示

    根据给定的文件信息,我们来详细解析如何通过JavaScript和CSS实现一个表格中行间隔显示不同颜色,并且能够对鼠标悬停的行实现高亮显示的效果。这在网页中是一种常见的交互效果,可以使表格数据更加易于阅读和区分。 ...

    javaWeb学习笔记

    - `rowspan`: 单元格纵向合并。 - 表格嵌套: `&lt;table&gt;` 标签可以嵌套使用。 **1.7 表单** - `&lt;form&gt;` 标签定义表单容器。 - `&lt;input&gt;` 标签创建不同的输入控件。 - `type` 属性定义控件类型: - `text`: 文本...

    javascript五子棋实现

    - 在JavaScript中,根据位置更新二维数组,将该格子标记为当前玩家的棋子颜色(如1或-1,分别代表黑棋和白棋)。 3. **游戏逻辑**: - 检查每次下棋后,是否有玩家形成五子连线。 - 这需要遍历所有可能的方向...

    用js驱动产生条纹式表格

    在JavaScript中,我们可以利用DOM(Document Object Model)来操作HTML元素,包括表格的行(tr)和单元格(td)。以下是一个简单的步骤来实现这个功能: 1. **获取表格元素**:首先,我们需要找到页面上的表格元素...

    javascript模拟题.pdf

    `&lt;tr&gt;`创建一个新的表格行,`&lt;td&gt;`和`&lt;th&gt;`用于创建单元格。 11. `&lt;a href=URL target=_self&gt;` 表示在本窗口打开超链接,对应D选项。`_self`表示链接会在当前窗口或框架中打开。 12. `Math.random()` 函数在...

    javascript模拟题.docx

    表格标记的基本结构是`&lt;table&gt;&lt;/table&gt;`,它包含了表格的行`&lt;tr&gt;&lt;/tr&gt;`、单元格`&lt;td&gt;&lt;/td&gt;`和表头单元格`&lt;th&gt;&lt;/th&gt;`等元素。问题8和22的答案都是C。 在HTML代码中,`&lt;a href=URL target=_self&gt;`表示在当前窗口或...

Global site tag (gtag.js) - Google Analytics