1. 首页
  2. 存储
  3. 其他
  4. 使用JavaScript实现动态创建表格

使用JavaScript实现动态创建表格

上传者: 2023-03-10 09:53:24上传 HTML文件 2.22KB 热度 26次

使用JavaScript实现动态创建表格是一种非常方便的方式,可以帮助用户快速生成表格,提升工作效率。以下是实现方法:

<script>
  // 创建表格元素
  var table = document.createElement("table");

  // 创建表头
  var header = table.createTHead();
  var row = header.insertRow(0);
  var cell = row.insertCell(0);
  cell.innerHTML = "姓名";
  cell = row.insertCell(1);
  cell.innerHTML = "年龄";
  cell = row.insertCell(2);
  cell.innerHTML = "性别";

  // 创建数据行
  var tbody = document.createElement("tbody");
  for (var i = 1; i <= 5; i++) {
    row = tbody.insertRow(i - 1);
    cell = row.insertCell(0);
    cell.innerHTML = "No." + i;
    cell = row.insertCell(1);
    cell.innerHTML = 20 + i;
    cell = row.insertCell(2);
    cell.innerHTML = i % 2 === 0 ? "女" : "男";
  }

  // 将表头和数据加到表格中
  table.appendChild(header);
  table.appendChild(tbody);

  // 将表格显示出来
  document.body.appendChild(table);
script>
下载地址
用户评论