使用js在页面中绘制表格核心代码

使用 JavaScript 在页面中绘制表格，可以方便地展示数据。表格绘制的核心代码包括以下几步：

创建 table 标签

在 HTML 文件中添加一个 table 标签，用于作为表格的容器。

<table id="myTable"></table>

获取表格容器

通过 JavaScript 获取 table 标签，并保存在变量中。

var table = document.getElementById("myTable");

创建表头

使用 JavaScript 创建表头，使用 table.insertRow() 方法在表格中添加一行，再使用 insertCell() 方法在行中添加单元格。

var headerRow = table.insertRow();
headerRow.insertCell().innerHTML = "姓名";
headerRow.insertCell().innerHTML = "年龄";
headerRow.insertCell().innerHTML = "性别";

创建表格数据行

使用循环语句创建数据行，使用和表头相同的方法添加单元格。

for (var i = 0; i < data.length; i++) {
  var row = table.insertRow();
  row.insertCell().innerHTML = data[i].name;
  row.insertCell().innerHTML = data[i].age;
  row.insertCell().innerHTML = data[i].gender;
}

其中，data 是一个包含数据的数组。

示例 1：绘制一个简单表格

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Table</title>
  </head>
  <body>
    <table id="myTable"></table>
    <script>
      var data = [
        { name: "张三", age: 20, gender: "男" },
        { name: "李四", age: 22, gender: "女" },
        { name: "王五", age: 25, gender: "男" }
      ];

      var table = document.getElementById("myTable");
      var headerRow = table.insertRow();
      headerRow.insertCell().innerHTML = "姓名";
      headerRow.insertCell().innerHTML = "年龄";
      headerRow.insertCell().innerHTML = "性别";

      for (var i = 0; i < data.length; i++) {
        var row = table.insertRow();
        row.insertCell().innerHTML = data[i].name;
        row.insertCell().innerHTML = data[i].age;
        row.insertCell().innerHTML = data[i].gender;
      }
    </script>
  </body>
</html>

示例 2：根据输入框内容动态生成表格

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>动态表格</title>
  </head>
  <body>
    <label for="rowNum">行数：</label>
    <input type="number" id="rowNum">
    <label for="colNum">列数：</label>
    <input type="number" id="colNum">
    <button onclick="createTable()">生成表格</button>
    <div id="tableContainer"></div>
    <script>
      function createTable() {
        var rowNum = document.getElementById("rowNum").value;
        var colNum = document.getElementById("colNum").value;

        var table = document.createElement("table");
        for (var i = 0; i < rowNum; i++) {
          var row = table.insertRow();
          for (var j = 0; j < colNum; j++) {
            var cell = row.insertCell();
            cell.innerHTML = i + ',' + j;
          }
        }

        var tableContainer = document.getElementById("tableContainer");
        tableContainer.innerHTML = "";
        tableContainer.appendChild(table);
      }
    </script>
  </body>
</html>

以上代码实现了一个简单的输入框，可以让用户输入行数和列数，然后点击按钮生成表格。在 createTable() 函数中，使用 createElement() 方法创建 table 标签，使用 insertRow() 和 insertCell() 方法添加行和单元格，最后将表格添加到页面上。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用js在页面中绘制表格核心代码 - Python技术站

使用js在页面中绘制表格核心代码

创建 table 标签

获取表格容器

创建表头

创建表格数据行

相关文章