一种HTML table合并单元格的思路
/**
* 合并单元格
* @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合并单元格的思路的更多相关文章
- table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)
table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...
- css table 合并单元格
1. css table 合并单元格 colspan:合并列, rowspan:合并行, 合并行的时候,比如rowspan="2",它的下一行tr会少一列: 合并列的时候,比如co ...
- table合并单元格
table合并单元格 新建一张表格.要求表格有四行四列,当中第一行的四列合并,第二行.第三行和第四行的第一列合并 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- ant design Table合并单元格合并单元格怎么用?
1.ant design table合并单元格怎么用?
- BootStrap Table 合并单元格
为了更直观展示表格的一大堆乱七八糟的数据,合并单元格就派上用场: 效果: 贴上JSON数据(后台查询数据一定要对合并字段排序): [ { "city": "广州市&quo ...
- table合并单元格colspan和rowspan .
colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...
- JQuery Table 合并单元格-解决Bug版本
网络中提供的方法是: <script type="text/javascript"> function _w_table_rowspan(_w_table_id, _w ...
- table合并单元格 colspan(跨列)和rowspan(跨行)
colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...
- Html table 合并单元格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- jsp项目中整个项目没有问题但是servlet报错
项目没问题但是serverlet报错 项目右键 buildPath-->configure build path -->Myeclipse Library-->J2EE 1.3 Li ...
- 云原生应用 Kubernetes 监控与弹性实践
前言 云原生应用的设计理念已经被越来越多的开发者接受与认可,而Kubernetes做为云原生的标准接口实现,已经成为了整个stack的中心,云服务的能力可以通过Cloud Provider.CRD C ...
- LightOJ 1370 Bi-shoe and Phi-shoe【欧拉函数 && 质数】
题目链接: http://lightoj.com/login_main.php?url=volume_showproblem.php?problem=1370 题意: 给定值,求满足欧拉值大于等于这个 ...
- SDUT-2116_数据结构实验之链表一:顺序建立链表
数据结构实验之链表一:顺序建立链表 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 输入N个整数,按照输入的顺序建立单链 ...
- deepin golang微服务搭建go-micro环境
1.安装micro 需要使用GO1.11以上版本 #linux 下 export GO111MODULE=on export GOPROXY=https://goproxy.cn # 使用如下指令安装 ...
- [kuangbin带你飞]专题九 连通图B - Network UVA - 315
判断割点的性质: 如果点y满足 low[y]>=dfn[x] 且不是根节点 或者是根节点,满足上述式子的有两个及其以上. 就是割点 如果是起点,那么至少需要两个子节点满足上述条件,因为它是根节点 ...
- SpringBoot使用logback输出日志并打印sql信息 --经典---
最近在学习springboot以及一些springcloud插件的使用,其中发现默认的配置并不能打印一些有用的日志,所以需要自定义一些日志输出方式以便于查看日志排查问题,目前只整理了两种使用方式,如下 ...
- Python--day68--Django ORM常用字段、不常用的字段、自定义字段
ORM和数据库的对应关系: Django ORM 常用字段和参数 常用字段 AutoField int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建 ...
- H3C 帧中继与水平分割
- jq实现鼠标悬停高亮当前图片
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...