原生table表格合并上午领导问我能不能整一个简单的表格出来,html文件,修改数据格式自动呈现表格,相同的行自动合并.

上午领导问我能不能整一个简单的表格出来,html文件,修改数据格式自动呈现表格,相同的行自动合并.说实话这个掘金上搜索很多,但是都是基于vue2,vue3各种框架实现的,虽然都具有参考价值,但是不能复制粘贴直接用就有点难受,而且我们是内网开发.最后搞了半天决定自己手写一个吧.话说原生js怎么写来着

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .raw-table {
        width: 100%;
        margin-bottom: 10px;
        table-layout: fixed;
        border: 1px solid #dee2e6;
        border-bottom: none;
        border-spacing: 0;
      }

      td,
      th {
        color: #333;
        font-size: 14px;
        word-wrap: break-word;
        padding: 12px;
        vertical-align: middle;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #dee2e6;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table class="raw-table">
      <thead id="mythead">
        <tr>
        </tr>
      </thead>
      <tbody id="mybody">
      </tbody>
    </table>
  </body>
  <script>
   let list = [
      { team:'指南针',server:5,num:'A23517551',cpu:'1.62/41.45'},
      { team:'指南针111',server:5,num:'A2351755',cpu:'1.62/41.45'},
      { team:'指北针',server:7,num:'A235175512',cpu:'1.62/41.45'},
      { team:'指北针',server:5,num:'A235175512',cpu:'1.62/41.45'},
      { team:'指北针',server:5,num:'A235175511',cpu:'1.62/41.45'},
      { team:'指南针',server:5,num:'A235175511',cpu:'1.62/41.45'},
    ];

    let  headerdata=['团队','双低服务器数','资产编号','双底利用率信息(CPU,MEM)']
    var out = "";
    function digui(item,index,i,arr,num){
         if(list[index]?.[i]&&item[i]==list[index][i]){
                  arr[num]= arr[num]+1
                  digui(item,index+1,i,arr,num)
         }
    }
    function getRowspan(item,index,arr) {
      let dataarr= Object.keys(item)
      for (let i = 0; i < dataarr.length; i++) {
        if(list[index+1]&&item[dataarr[i]] ==list[index+1][dataarr[i]] ){
                    digui(item,index+1,dataarr[i],arr,i)
          }
      }

    }
 let alllist= []
    list.forEach((item,index) => {
      let arr= Array.from({length:headerdata.length}, () => 1)   
      getRowspan(item,index,arr)
      alllist.push(arr)

     if(alllist.length==list.length){
      let reversedNumbers = alllist.reverse();
      alllist.forEach((item,index) =>{
        item.forEach((el,i) =>{
          if(alllist[index+1]?.[i]>1){
            alllist[index][i]=0
          }
        })
      })
      alllist = reversedNumbers.reverse()
      list.forEach((item,index)=>{
          item.arr=alllist[index]
          out += `
            <tr style='height:44px'>
              <td style='${item.arr[0]?"":"display:none"}' rowspan="${item.arr[0]}">${item.team}</td>
              <td style='${item.arr[1]?"":"display:none"}' rowspan="${item.arr[1]}">${item.server}</td>
              <td style='${item.arr[2]?"":"display:none"}' rowspan="${item.arr[2]}">${item.num}</td>
              <td style='${item.arr[3]?"":"display:none"}' rowspan="${item.arr[3]}">${item.cpu}</td>
            </tr>
            `
      })
     }
    });
    let tab = document.getElementById("mybody");
    tab.innerHTML = out;
    let head = document.getElementById("mythead");
    let  strhead=''
    headerdata.forEach(item=>{
      strhead+= `<th>${item}</th>` 
    })
    head.innerHTML =strhead
  </script>
</html>

原生table表格合并

效果图