Question

我试图根据用户给定的大小创建表，但结果我将所有单元格都放在一行中。

我尝试使用循环内循环。一个创建trs，第二个创建tds

unsafe

我希望它创建多个行，而不仅仅是一行。当我打开控制台日志时，所有内容都存储在。

Answer 1

问题在于$(selector).append('<tr>')将创建一个新的DOMElement（即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);
}

Answer 2

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

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

创建新的当前“行”元素作为外循环的第一步
在内部循环期间，将<td>个元素附加到当前行
将当前“行”附加到表本身

这可以用代码表示为：

function createTable(size) {
  for (var j = 1; j < size + 1; j++) {

    /* Create new row */
    const row = $("<tr>");

    for (var i = 1; i < size + 1; i++) {
      /* Append td cell to current row */
      row.append('<td><input class="add"/></td>');

    }

    /* Add newly created row to table */
    $('table').append(row);
  }
}

createTable(10);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table></table>

Answer 3

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

$(document).ready(function() {
  function createTable(size){
      for (var j=1; j<size+1; j++){
          var tr = $("<tr>");
          $('table').append(tr);
          for (var i=1; i<size+1; i++){
              tr.append('<td><input class="add"/></td>');
          }
      }
  }
  createTable(5);
});

另一方面，如果将数组传递给函数，则可以控制tr和td的数量。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table></table>

$(document).ready(function() {
  function createTable(size){
      for (var j=1; j<size[0]+1; j++){
          var tr = $("<tr>");
          $('table').append(tr);
          for (var i=1; i<size[1]+1; i++){
              tr.append('<td><input class="add"/></td>');
          }
      }
  }
  createTable([3,5]);
});

使用jQuery创建HTML表并追加

3 个答案: