js控制table单元格行列相同内容合并

最新推荐文章于 2024-04-07 17:19:06 发布

宋法全

最新推荐文章于 2024-04-07 17:19:06 发布

阅读量1.3k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_37297578/article/details/100516459

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏


<!DOCTYPE>
<HTML>

<HEAD>
  <style>

  </style>
</HEAD>


<BODY>
  <TABLE border="1">
    <thead id="tb" οnclick="findcell()">
      <TR>
        <TD>国家</TD>
        <TD>国家</TD>
        <TD>国家1</TD>
      </TR>
      <TR>
        <TD>国家555</TD>
        <TD>河南</TD>
        <TD>国家2</TD>
      </TR>
      <TR>
        <TD>中国</TD>
        <TD>四川</TD>
        <TD>国家3</TD>
      </TR>
      <TR>
        <TD>中国</TD>
        <TD>四川</TD>
        <TD>北京4</TD>
      </TR>
      <TR>
        <TD>美国</TD>
        <TD>纽约</TD>
        <TD>国家4</TD>
      </TR>
      <TR>
        <TD>美国</TD>
        <TD>洛杉矶</TD>
        <TD>国家4</TD>
      </TR>
      <TR>
        <TD>英国</TD>
        <TD>英国</TD>
        <TD>国家4</TD>
      </TR>
    </thead>
    <tbody>
      <tr>
        <td>不合并</td>
        <td>不合并</td>
        <TD>不合并</TD>
      </tr>
    </tbody>
  </TABLE>

  <button onclick="SpanGrid('tb')">合并</button>
</BODY>
<script>

  let rowBeginIndex
  let colIndex

  (function () {   //定义函数
    var tr = document.getElementsByTagName("tr");
    for (var i = 0; i < tr.length; i++) {
      var tds = tr[i].children;
      for (var j = 0; j < tds.length; j++) {
        tds[j].onclick = (function () {
          var row = i + 1, col = j + 1;
          return function () {
            rowBeginIndex = row - 1
            colIndex = col - 1
            console.log("第" + row + "行" + col + "列");
          }
        })();
      }
    }

  })();


  // tabObjId  id
  // colIndex 第几列
  // rowBeginIndex 第几行

  function SpanGrid(tabObjId) {


    var tabObj = document.getElementById(tabObjId);
    if (tabObj != null) {
      var i, j, m, k, q, w, e, r;


      var intSpan;
      var strTemp;
      m = 0;

      //这个For循环是合并行
      console.log('tabObj.rows', tabObj.rows[0].cells)
      // colIndex 开始遍历列索引
      // for (colIndex; colIndex < tabObj.rows[0].cells.length; colIndex++) {

      // 遍历开始行
      for (i = rowBeginIndex; i < tabObj.rows.length; i++) {
        intSpan = 1;
        m++;
        // 遍历的 第几行第几列
        strTemp = tabObj.rows[i].cells[colIndex].innerText;
        for (j = i + 1; j < tabObj.rows.length; j++) {
          // 和下一行比较如果相同就合并，不同继续遍历
          if (strTemp == tabObj.rows[j].cells[colIndex].innerText) {
            intSpan++;
            tabObj.rows[i].cells[colIndex].rowSpan = intSpan;
            tabObj.rows[j].cells[colIndex].style.display = "none";

          }
          else {
            break;
          }
        }


      }
      // }
      //这个For循环是合并列（无需合并列可删除）
      for (q = rowBeginIndex; q < tabObj.rows.length; q++) {

        for (w = 0; w < tabObj.rows[0].cells.length; w++) {
          intSpan = 1;
          colspan = tabObj.rows[q].cells[w].rowSpan;
          strTemp = tabObj.rows[q].cells[w].innerText;
          if ("none" == tabObj.rows[q].cells[w].style.display) {
            continue;
          }
          for (e = w + 1; e < tabObj.rows[q].cells.length; e++) {
            if ("none" == tabObj.rows[q].cells[e].style.display) {
              continue;
            }
            colspan1 = tabObj.rows[q].cells[e].rowSpan
            if (strTemp == tabObj.rows[q].cells[e].innerText && (colspan ==
              colspan1)) {
              intSpan++;
              tabObj.rows[q].cells[w].colSpan = intSpan;
              tabObj.rows[q].cells[e].style.display = "none";
            }
            else {
              break;
            }
          }


        }
        break;

      }

      i = j - 1;
    }
  }


</script>

</HTML>

宋法全

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js控制table单元格行列相同内容合并

<!DOCTYPE><HTML><HEAD> <style> </style></HEAD><BODY> <TABLE border="1"> <thead id="tb" οnclick="findcell()"> <TR> ...
复制链接

扫一扫