利用js合并table单元格

点击按钮，第一列中所有相同内容的单元格进行合并，也可用于动态数据，这里演示使用的固定数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table</title>
    <style>
    button {
      margin-top: 30px;
    }
    </style>
</head>
<body>
    <table border="1" id="my-table">
        <tr>
          <td>星期天</td>
          <td>星期一</td>
          <td>星期二</td>
        </tr>
        <tr>
          <td>星期天</td>
          <td>星期一</td>
          <td>星期二</td>
        </tr>
        <tr>
          <td>星期四</td>
          <td>星期一</td>
          <td>星期二</td>
        </tr>
        <tr>
          <td>星期四</td>
          <td>星期一</td>
          <td>星期二</td>
        </tr>
        <tr>
          <td>星期四</td>
          <td>星期一</td>
          <td>星期二</td>
        </tr>
        <tr>
          <td>星期天</td>
          <td>星期一</td>
          <td>星期二</td>
        </tr>
        <tr>
          <td>星期五</td>
          <td>星期一</td>
          <td>星期二</td>
        </tr>
        <tr>
          <td>星期五</td>
          <td>星期一</td>
          <td>星期二</td>
        </tr>
      </table>
      <button id="my-button">My Button</button>
      <script>
      var btn = document.getElementById('my-button');
      var tr = document.getElementById('my-table').rows;
      function merger(rowNum) {
        var k = 1;
        for (i = rowNum; i > 0; i--) {
            if (tr[i].firstElementChild.textContent === tr[i-1].firstElementChild.textContent) {
                tr[i].cells[0].style.display = 'none';
                k++;
                //如果第一行和第二行相等，给第一行设置rowspan属性，合并第一行和第二行
                if ((i - 1) === 0) {
                  tr[0].cells[0].setAttribute('rowspan', k);
                }
            }
            else {
                tr[i].cells[0].setAttribute('rowspan', k);
                rowNum -= k;
                merger(rowNum);
            }
        }
    }
    btn.onclick = function() {
      merger(tr.length-1);
    };
      </script>
</body>
</html>