Javascript 使用jquery和append创建html表

我试图根据用户给定的大小创建表，但结果是我得到了一行中的所有单元格

我试过在循环中使用循环。一个创建trs，而另一个创建tds

function createTable(size){
    for (var j=1; j<size+1; j++){
        $('table').append("<tr>");

        for (var i=1; i<size+1; i++){
            $('table').append('<td><input class="add"/></td>');

        }

        $('table').append("</tr>"); 
    }
}

函数createTable（大小）{
对于（var j=1；j问题在于，
$（选择器）。append（“”）
将创建一个新的domeElement，它是一个TR，并将其追加。您不是追加HTML，而是追加DOM节点。因此，您要么构建整个HTML并追加它，要么创建节点，并在追加之前/之后修改它们

在本例中，简单地生成HTML并附加它是相当直接的

function createTable(size){
  var newRows = '';

  for (var j=1; j<size+1; j++){
    newRows += '<tr>';

    for (var i=1; i<size+1; i++){
      newRows += '<td><input class="add"/></td>';
    }

    newRows += "</tr>";
  }

  $('table').append(newRows);
}

函数createTable（大小）{
var newRows=''；
对于（var j=1；j问题在于，
$（选择器）。append（“”）
将创建一个新的domeElement，它是一个TR，并将其追加。您不是追加HTML，而是追加DOM节点。因此，您要么构建整个HTML并追加它，要么创建节点，并在追加之前/之后修改它们

在本例中，简单地生成HTML并附加它是相当直接的

function createTable(size){
  var newRows = '';

  for (var j=1; j<size+1; j++){
    newRows += '<tr>';

    for (var i=1; i<size+1; i++){
      newRows += '<td><input class="add"/></td>';
    }

    newRows += "</tr>";
  }

  $('table').append(newRows);
}

函数createTable（大小）{
var newRows=''；
对于（var j=1；j请确保将新的
单元格添加到表的
元素中，而不是像当前那样直接将
单元格添加到

考虑以下更改以解决您的问题：

创建一个新的当前“行”元素作为外部循环的第一步
在内部循环期间，将
元素附加到当前行
将当前“行”附加到表本身
这可以用代码表示为：


函数createTable（大小）{
对于（变量j=1；j

确保将新的
单元格添加到表的
元素中，而不是像当前那样直接将
单元格添加到

考虑以下更改以解决您的问题：

创建一个新的当前“行”元素作为外部循环的第一步
在内部循环期间，将
元素附加到当前行
将当前“行”附加到表本身
这可以用代码表示为：


函数createTable（大小）{
对于（变量j=1；j

如果将tr作为dom对象存储在变量中，则可以将其追加到表中，然后追加到存储的tr dom对象中


$（文档）.ready（函数（）{
函数createTable（大小）{
对于（var j=1；j如果将tr作为dom对象存储在变量中，则可以将其追加到表中，然后追加到存储的tr dom对象中


$（文档）.ready（函数（）{
函数createTable（大小）{
对于（var j=1；j0），您正在尝试追加html。
append（）
创建dom节点。您必须更改视图。您追加的是表而不是要追加html的行。
append（）
创建dom节点。您必须更改视图。您追加的是表而不是行