js 实现data返回的数据生成table

1. 请求接口返回数据
   这里返回的数据结构类似于这样
   var data = [
   [‘’, ‘头部1’, ‘头部1’, ‘头部1’, ‘头部1’, ‘头部1’, ‘头部1’, ‘头部1’],
   [‘’, ‘头部1’, ‘头部1’, ‘头部1’, ‘头部1’, ‘头部1’, ‘头部1’, ‘头部1’]
   ]

2. 根据返回的数据渲染在table
   由于需要行列合并，这里就没有需要thead

   var tab = document.getElementById("table");
   var strHtml = '<tbody>'
    	data.map((item,index) => {
    		strHtml += '<tr>'
    		item.map((value,key) => {
    		// 由于数据返回可能是null，如果是null设置为空
    			if(value == null){
              		value = ''
               }
                strHtml += '<td style="min-width:150px;min-height:50px;text-align: center;">'+ value +'</td>'
    		})
    		strHtml += '</tr>'
    		
    	})
    	strHtml += '</tbody>'
       tab.innerHTML = strHtml 
                 ```
   
   

3.合并行和列中内容相同的值
调用两个方法，合并行和列
this.mergeFunc(tab.rows[0].cells.length)
this.table_colspan(tab.rows[0].cells.length)

mergeFunc(num){
	var tab = document.getElementById("table");
    var maxCol = num;//maxcol用于设置需要合并的列数
    var count, start;
    var colCount,colStart
    for (var col = maxCol - 1; col >= 0; col--) {
        //用于存储相同个数
        count = 1;
        for (var i = 0; i < tab.rows.length; i++) {
            if (i > 0 && col > 0 && tab.rows[i].cells[col].innerHTML == tab.rows[i - 1].cells[col].innerHTML
                && tab.rows[i].cells[col - 1].innerHTML == tab.rows[i - 1].cells[col - 1].innerHTML && tab.rows[i].cells[col].innerHTML) {
                count++;
            } else if (i > 0 && col == 0 && tab.rows[i].cells[col].innerHTML == tab.rows[i - 1].cells[col].innerHTML && tab.rows[i].cells[col].innerHTML) {
                count++;
            } else {
                if (count > 1) {
                    //合并
                    start = i - count;
                    tab.rows[start].cells[col].rowSpan = count;
                    for (var j = start + 1; j < i; j++) { //
                        tab.rows[j].removeChild(tab.rows[j].cells[col]);
                    }
                    count = 1;
                }
            }
        }
        if (count > 1) { //合并，最后几行相同的情况下
            start = i - count;
          console.log(start,count,'^^^')
            tab.rows[start].cells[col].rowSpan = count;
            for (var j = start + 1; j < i; j++) {
                tab.rows[j].removeChild(tab.rows[j].cells[col]);
            }
        }
    }
}


table_colspan(num){
	var numCol= 0,total
    var tab = document.getElementById("table");
    var count = 1, start;
    var colCount,colStart,active
    for(var w= 0; w < tab.rows.length;w++){
      for(var i = 1 ; i < tab.rows[w].cells.length;i++){
        total=0
        var _text = tab.rows[w].cells[i-1].innerText
        var _text1= tab.rows[w].cells[i].innerText
        if(_text && _text == _text1){
          count ++
        } else {
          if(count > 1){
            total ++
            start = i - count
            tab.rows[w].cells[start].colSpan = count
            for (var j = start + 1; j < i; j++) {
              tab.rows[w].removeChild(tab.rows[w].cells[start+1]);
            }
            numCol +=count
            count = 1
          }
        }
      }
      if(count > 1){
        start = i - count
        tab.rows[num].cells[start].colSpan = count;
        for (var j = start + 1; j < i; j++) {
          tab.rows[num].removeChild(tab.rows[num].cells[start+1]);
        }
        count = 1
      }
    }
}

4.最后实现的效果如下