table相同项 纵向合并

背景:测试同学 用原生table 开发遇到问题,相同 标题的td数据 纵向合并td标题，想要效果如下

iwork1 和iwork2 拥有相同的测试计划名称都叫 test1 ,iwork3和iwork4 拥有相同的测试计划 叫 test2。

dom 代码如下： `

<tbody>
  <tr>
    <td class="name">test1</td>
    <td>iwok1</td>
    <td>plate</td>
    <td>php</td>
    <td>group</td>
    <td>people</td>
    <td>branch</td>
    <td><a>查看</a></td>
  </tr>
  <tr>
    <td class="name">test1</td>
    <td>iwok2</td>
    <td>plate</td>
    <td>php</td>
    <td>group</td>
    <td>people</td>
    <td>branch</td>
    <td><a>查看</a></td>
  </tr>
  <tr>
    <td class="name">test2</td>
    <td>iwok3</td>
    <td>plate</td>
    <td>php</td>
    <td>group</td>
    <td>people</td>
    <td>branch</td>
    <td><a>查看</a></td>
  </tr>
  <tr>
    <td class="name">test2</td>
    <td>iwok4</td>
    <td>plate</td>
    <td>php</td>
    <td>group</td>
    <td>people</td>
    <td>branch</td>
    <td><a>查看</a></td>
  </tr>
</tbody>

js 如下

<script>
  function autoRowSpan(tb, selector) {
    var lastValue;
    var lastTdIndex;
    var value = "";
    var pos = 1;
    let tds = document.querySelectorAll(selector);
    for (var i = 0; i < tds.length; i++) {
      var td = tds[i];
      value = td.innerText;
      if (lastValue == value) {
        tb.rows[i + 1].deleteCell(td.cellIndex);
        console.log(i + 1 - pos, tb.rows[i + 1 - pos].cells, lastTdIndex)
        tb.rows[i + 1 - pos].cells[lastTdIndex].rowSpan =
          tb.rows[i - pos + 1].cells[lastTdIndex].rowSpan + 1;
        pos++;
      } else {
        lastValue = value;
        lastTdIndex = td.cellIndex;
        pos = 1;
      }
    }
  }
  setTimeout(() => {
  // tb 为table 的id ,第二个参数 是需要合并的td 的class
    autoRowSpan(tb, ".name");
  })
</script>