javascript - 如何将 'x' 个 元素添加到 for 循环中的 元素中？ [jQuery]

Question

我正在尝试通过 jQuery 动态制作一个方 table

到目前为止我的代码是

$(document).ready(function() {
  $('body').append('<table></table>');
  initial();
});

var input = 16

function initial () {
  for (i = 0; i < input; i++) {
    $('table').append('<tr></tr>');
    $('tr').append('<td></td>');
  }
}

我想做的是，如果我添加 16 个表格行元素，那么将向每个元素添加 16 个表格数据元素，从而有效地创建一个 16x16 网格

我当前的代码仅创建了表格的一半我必须通过 jQuery 来做到这一点

抱歉，如果这很简单，但我有点愚蠢

谢谢

Answer 1

你必须一个接一个地进行两个循环:

$(document).ready(function() {
  $('body').append('<table></table>');
  initial();
});

var input = 16

function initial () {
  for (i = 0; i < input; i++) {
    $('table').append('<tr></tr>');
  }
  for (j = 0; j < input; j++) {
    $('tr').append('<td>content</td>');    
  }
}

顺便说一句，创建表的方式是错误的，因为你每次都引用 DOM，这是昂贵的。您应该首先使用表创建字符串，然后将其追加到 DOM 中:

var input = 16
function initial () {
  var output = "<table>"
  for (i = 0; i < input; i++) {
    output += "<tr>";
    for (j = 0; j < input; j++) {
      output += "<td>content</td>";
    }
    output += "</tr>";
  }
  output += "</table>"
  $('body').append(output);
}