js-表格多级统计

js 表格-多级统计

1、主要采用递归方法进行遍历添加行，以下为核心方法

	/**
     * 合并表格相同列 tbId 表格id,row总行数，col合并列数
     */
    function countRowHandle (tbId,row,col) {
      if (row == 1) {
        return 1
      }else {
        // 合并
        for (var i = 0; i < col; i++) {
          if (tbId.rows[row].cells[0].innerHTML == tb.rows[row-1].cells[0].innerHTML) { // 判断第一列是否相等
            if (tbId.rows[row].cells[i].innerHTML == tb.rows[row-1].cells[i].innerHTML) {
              tbId.rows[row-1].cells[i].rowSpan = (tb.rows[row].cells[i].rowSpan | 0) + 1
              tbId.rows[row].cells[i].style.display = 'none';
            }
          }
        }

        // 新增行 总计
        if ((tb.rows[row].cells[0].rowSpan | 0) < 2) {
          var t = tb.insertRow(row+1);
          for (var i = 0; i < col_len; i++) {
            if (i == 0) {
              t.insertCell(i).innerHTML = '总计';
              tbId.rows[row+1].cells[i].colSpan = 3;
            }
            else {
              t.insertCell(i).innerHTML = '';
            }
          }
        }

        // 删除总计多余col
        if (tb.rows[row+1].cells[0].colSpan > 1) {
          tbId.rows[row+1].cells[1].style.display = 'none';
          tbId.rows[row+1].cells[2].style.display = 'none';
        }

        // 新增行 小计
        if ((tb.rows[row].cells[1].rowSpan | 0) < 2) {
          var t = tb.insertRow(row+1);
          for (var i = 0; i < col_len; i++) {
            if (i == 0) {
              t.insertCell(i).innerHTML = tb.rows[row].cells[i].innerHTML;
              tbId.rows[row+1].cells[i].style.display = 'none';
            }
            else if (i == 1) {
              t.insertCell(i).innerHTML = tb.rows[row].cells[i].innerHTML + '小计';
              tbId.rows[row+1].cells[i].colSpan = 2;
            
            }
            else {
              t.insertCell(i).innerHTML = '';
            }
          }
          tbId.rows[row-1].cells[0].rowSpan += 1
        }
        
        // 删除小计多余col
        if (tb.rows[row+1].cells[1].colSpan > 1) {
          tbId.rows[row+1].cells[2].style.display = 'none';
        }

        return countRowHandle(tbId,row -1,col)
      }
    }

2、调用方法：

 $(function () {
    var tb = document.getElementById('sub'); // 表格
    var row_len = $('table#sub>tbody>tr').length; // 总行数
    var col_len = $('table#sub>tbody>tr>td').length/row_len; //总列数

    countRowHandle (tb,row_len,2)
  })

3、效果图