如何添加 <td> 元素成一個 <tr> for循環中的元素？ [jQuery]

Question

我正在嘗試通過jQuery動態制作一個方桌

到目前為止，我的代碼是

$(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);
}