利用js合并table单元格

最新推荐文章于 2022-12-12 09:00:57 发布

RebootTang

最新推荐文章于 2022-12-12 09:00:57 发布

阅读量638

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/applyTang/article/details/97134397

html 同时被 3 个专栏收录

14 篇文章

订阅专栏

css

12 篇文章

订阅专栏

javascript

7 篇文章

订阅专栏

这篇博客介绍如何通过JavaScript实现动态合并HTML表格中相同内容的单元格，适用于处理静态或动态数据。点击按钮操作，主要聚焦于第一列的单元格合并。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!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>