js动态生成表格

最新推荐文章于 2024-05-03 16:01:29 发布

qinqin.song

最新推荐文章于 2024-05-03 16:01:29 发布

阅读量175

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_45080379/article/details/108756705

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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>
    table {
      border-collapse: collapse;
      margin: 100px auto;
    }

    table,
    th,
    td {
      border: 1px solid black;
      text-align: center;
      padding: 10px 15px;
    }
  </style>
</head>

<body>

</body>
<script src="./jquery-1.12.4.js"></script>
<script>
  // var num = 3;  //每列几个小格
  // var colums = 4; //几大列
  // var rows = 4;//几行


  function initTable(num, colums, rows) {
    //表格
    var tab = document.createElement("table");

    //头
    var thead = document.createElement("thead");
    var firstTr = $("<tr></tr>");
    for (var i = 0; i < colums; i++) {
      if (i != 0) {
        firstTr.append("<th colspan='" + num + "'>合计</th>")
      } else {
        firstTr.append("<th>未合计</th>")
      }
    }
    $(thead).append(firstTr);
    tab.appendChild(thead);

    //body
    var tb = document.createElement("tbody");
    tab.appendChild(tb);
    var totalSmallCell = (colums - 1) * (num != 0 ? num : 1) + 1;
    for (var i = 0; i < rows; i++) {
      var tr = tb.insertRow(tb.rows.length);
      for (var j = 0; j < totalSmallCell; j++) {
        var td = tr.insertCell(tr.cells.length);
        td.innerHTML = "第" + (i + 1) + "行" + (j + 1) + "列";
      }
    }
    document.body.appendChild(tab);
  }
  initTable(3, 3, 5)
</script>

</html>