使用jQuery动态构建HTML表

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

$(document).ready(function () {
  // 创建表标签
  var table =<table>';

  // 创建行数据
  table += '<tr>';
  for (var i = 0; i < 4; i++) {
    table += '<td>' + i + '</td>';
  }
  table += '</tr>';
  table += '<tr>';
  for (var j = 0; j < 4; j++) {
    table += '<td>' + j + '</td>';
  }
  table += '</tr>';
  table += '<tr>';
  for (var k = 0; k < 4; k++) {
    table += '<td>' + k + '</td>';
  }
  table += '</tr>';

  // 结束表标签
  table += '</table>';

  // 向网页中添加表格
  $('body').append(table);
});

$(document).ready(function () {
  // 向表格添加行数据
  for (var i = 0; i < 4; i++) {
    $('<tr/>', { html: "<td>" + i + "</td>" }).appendTo($("#table-container"));
  }

  // 向表格添加行数据
  for (var j = 0; j < 4; j++) {
    $('<tr/>', { html: "<td>" + j + "</td>" }).appendTo($("#table-container"));
  }

  // 向表格添加行数据
  for (var k = 0; k < 4; k++) {
    $('<tr/>', { html: "<td>" + k + "</td>" }).appendTo($("#table-container"));
  }
});

$(document).ready(function () {
  // 设置 table 的容器的 CSS 样式
  $("#table-container").css("border", "1px solid black");
  $("#table-container").css("height", "100vh");
  $("#table-container").css("margin", "auto");

  // 获取 table 元素
  var table = $("#table-container");

  // 创建 table 的 CSS 样式
  var style = `
 <style>
    #table-container {
      border: 1px solid black;
      height: 100vh;
      margin: auto;
      width: 100%;
    }
  </style>
  `;

  // 在网页中添加 table 元素
  $('<div/>', { style: style }).appendTo('body');
});

$(document).ready(function () {
  // 刷新表格
  setInterval(function () {
    var newTable = $(`.${randomInt(1, 100)}`);
    table.append(newTable);
  }, 1000);
});