一种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]);     

下面是合并后的效果 :

原文地址:https://www.cnblogs.com/macliu/p/10812026.html

时间: 2024-11-06 11:05:18

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

table合并单元格

新建一张表格.要求表格有四行四列,当中第一行的四列合并,第二行.第三行和第四行的第一列合并 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

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

colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元格4 该例通过把colspan设为“3”, 令所在单元格横跨了三列.如果我们将colspan设为“2”,则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数. 该例在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元

table 合并单元格方法

<span style="font-family:Microsoft YaHei;font-size:14px;">//合并单元格 function cellHandler(){ var tab = document.getElementById("data_table"); //maxCol循环列 var maxCol = 2, val, count, start; for(var col = maxCol-1; col >= 0 ; col--

bootstrap table合并单元格(该版本是简单的应用)

//获取列表数据 function loadTableData(tableId, request, data) { $.ajax({ type : "GET", url : request, contentType : 'application/json', dataType : "json", data : data, success : function(json) { //从后台获取到数据后进行表格的渲染 $('#featureBusinessClassify

table合并单元格colspan和rowspan

colspan和rowspan这两个属性用于创建特殊的表格. colspan是"column span(跨列)"的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元格4 该例通过把colspan设为"3", 令所在单元格横跨了三列.如果我们将colspan设为"2",则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数. 该例在浏览器

兄弟连学Python(06)---- table合并单元格colspan和rowspan

colspan和rowspan这两个属性用于创建特殊的表格. colspan是"column span(跨列)"的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元格4 该例通过把colspan设为"3", 令所在单元格横跨了三列.如果我们将colspan设为"2",则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数. 该例在浏览器

Html table 合并单元格

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ol> 9 <li>基本表格</li> 10 <table border="2" bord

css——table合并单元格

参考:https://www.cnblogs.com/yangwang12345/p/7840253.html 合并列——colspan 合并行——rowspan 合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的列会少一列 示意图: html: <table border="1" style={{margin:200}}> <tbody> <tr>

table合并单元格demo

图例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"