/**
* 合并单元格
* @param table1 表格的ID
* @param startRow 起始行
* @param col 合并的列号,对第几列进行合并(从0开始)。如果传下来为0就是从第一列开头到结束合并
*/ function mergeCell(table1, startRow, mergeColArr){ var tb = document.getElementById(table1);
var endRow=tb.rows.length;
var colLen = tb.rows[0].cells.length - 1;
var cmpCnt = "order_no";
var orderRows = [];
var bgColor = ["rgb(252,252,252)","rgb(242,242,242)"];
var orderIdx = 0;
//每个订单的起始行号
var mergeStarRow = 1; for (var i = startRow; i < endRow; i++) { if(typeof tb.rows[i + 1] === "undefined"){ for(var m = colLen; m >= 0; m--){
tb.rows[i].cells[m].style.backgroundColor = bgColor[orderIdx % 2];
}
break;
} var prev_rows = tb.rows[startRow],prev_cells = prev_rows.cells;
var next_rows = tb.rows[i + 1],next_cells = next_rows.cells; if ($.trim(prev_rows.getAttribute(cmpCnt)) == $.trim(next_rows.getAttribute(cmpCnt)))
{
if(typeof tb.rows[i + 2] === "undefined"){
orderRows.push({"starow":mergeStarRow,"endrow":i+1});
}
continue;
}else{
startRow = i + 1;
orderRows.push({"starow":mergeStarRow,"endrow":i});
mergeStarRow = startRow;
orderIdx++;
}
} var len = orderRows.length; for(var n = 0;n < len; n++){ var starow = orderRows[n]["starow"];
var endrow = orderRows[n]["endrow"];
var rowspan = endrow - starow + 1; //循环行
for(var j = starow; j <= endrow; j++){ var flag = false;
//反序循环列(因为删掉td后索引会变)
for(var k = colLen; k >= 0; k--){ tb.rows[j].cells[k].style.backgroundColor = bgColor[n % 2];
if(mergeColArr.indexOf(k) > -1){ //如果是第一行,就设置rowSpan
if(j === starow){
tb.rows[j].cells[k].rowSpan = rowspan;
}else{
//否则就倒序删掉mergeColArr[k]列
tb.rows[j].removeChild(tb.rows[j].cells[k]);
}
} } } } } mergeCell('c1',1,[0,1,2,6,7,8,9,10,12]);

下面是合并后的效果 :

一种HTML table合并单元格的思路的更多相关文章

  1. table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)

    table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...

  2. css table 合并单元格

    1. css table 合并单元格 colspan:合并列, rowspan:合并行, 合并行的时候,比如rowspan="2",它的下一行tr会少一列: 合并列的时候,比如co ...

  3. table合并单元格

    table合并单元格 新建一张表格.要求表格有四行四列,当中第一行的四列合并,第二行.第三行和第四行的第一列合并 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. ant design Table合并单元格合并单元格怎么用?

    1.ant design table合并单元格怎么用?

  5. BootStrap Table 合并单元格

    为了更直观展示表格的一大堆乱七八糟的数据,合并单元格就派上用场: 效果: 贴上JSON数据(后台查询数据一定要对合并字段排序): [ { "city": "广州市&quo ...

  6. table合并单元格colspan和rowspan .

    colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...

  7. JQuery Table 合并单元格-解决Bug版本

    网络中提供的方法是: <script type="text/javascript"> function _w_table_rowspan(_w_table_id, _w ...

  8. table合并单元格 colspan(跨列)和rowspan(跨行)

    colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...

  9. Html table 合并单元格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Xcode10 import导入文件的坑

    更新了10.0的Xcode,踩了两个坑,记录一下. #import "" 双引号内输入任何字符 都会导致Xcode崩溃 解决方案: target - buildSettings - ...

  2. oracle函数的分类

    v  单行函数:对每一行输入值进行计算,得到相应的计算结果,返回给用户,也就是说,每行作为一个输入参数,经过函数计算得到每行的计算结果. 比如select length(ename) from emp ...

  3. idea建立maven聚合项目 标签: mavenidea 2017-01-08 15:33 2477人阅读 评论(30)

    上篇文章写了如何用idea建立maven项目,idea建立maven聚合项目我感觉不如eclipse方便,不过并不是没有办法,下面写一下这个小教程. 建立maven project 建立maven p ...

  4. (转)理解inode

    作者:阮一峰 原文链接:http://www.ruanyifeng.com/blog/2011/12/inode.html 一.inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘上 ...

  5. 在 Linux 启动或重启时执行命令与脚本

    有时可能会需要在重启时或者每次系统启动时运行某些命令或者脚本.我们要怎样做呢?本文中我们就对此进行讨论. 我们会用两种方法来描述如何在 CentOS/RHEL 以及 Ubuntu 系统上做到重启或者系 ...

  6. spring-jpa通过自定义sql执行修改碰到的问题

    在编写自定义SQL的时候需要注意 @Query 注解只能用来查询,想要进行添加.修改和删除操作需要配合 @Modifying 注解一同使用 @Modifying @Query("update ...

  7. IO流实现文件及文件夹的复制

    TestCopyDocuments.java package com.sxt.parc; /* * 复制文件夹 包含文本 视频 音频 用字节流 */ import java.io.BufferedIn ...

  8. @loj - 2250@ 「ZJOI2017」仙人掌

    目录 @题目描述@ @solution@ @accepted code@ @details@ @题目描述@ 如果一个无自环无重边无向连通图的任意一条边最多属于一个简单环,我们就称之为仙人掌.所谓简单环 ...

  9. TensorFlow 池化层

    在 TensorFlow 中使用池化层 在下面的练习中,你需要设定池化层的大小,strides,以及相应的 padding.你可以参考 tf.nn.max_pool().Padding 与卷积 pad ...

  10. 【HAOI2015】树上染色

    [HAOI2015]树上染色 这题思路好神仙啊,首先显然是树形dp,f[i][j]表示在以i为根的子树中选j个黑点对答案的贡献(并不是当前子树最大值),dp时只考虑i与儿子连边的贡献.此时(i,son ...