jQuery，添加多个表行无法正常工作

Question

这个想法是构建一个接受输入并使用它来构建网格的函数。我试图首先建立网格功能，但我遇到了一个特殊的错误。我搜索了几个小时，但答案都告诉我一个简单的“附加”应该可以工作。

我得到的具体错误： 当我加载网页时，它只向 tbody 添加一个表格行，并且只向该表格行添加一个表格数据。这个想法是创建一个 16 x 16 的网格，包含 16 行和 16 个数据。控制台日志显示循环都正常工作。

html 只是一个基本文件，可以正确导入 javascript（所有测试），简单： div class="容器" /div

代码：

  $(document).ready(function(){
  $(".container").html("");
  /*this function makes a table of size numRow and
  num data. it then gives each data element
  */
  //blank rows to insert
  var blankResults = $("<table>");
  var result = blankResults;
  var row = $("<tr/>");
  var data = $("<td/>");

  function makeTable(num) 
  {
    result = blankResults;
        //create num rows
    for (var i = 0; i < num; i++)
    {
      //for each row
      //add data num times
      for (var j = 0; j < num; j++)
      {
        console.log(j);
        row.append(data);
      }
      //append row
      console.log(i);
      result.append(row);
    }
  }
  //starting area
  makeTable(16);
  $(".container").append(result);
  //Start with 16 by 16 of square divs - 
  //put inside a container div
});

Answer 1

试试这个代码。

$(document).ready(function(){
    $(".container").html("");
    /*this function makes a table of size numRow and
          num data. it then gives each data element
          */
    function makeTable(num) 
    {
        var output = '<table>';
        //create num rows
        for (var i = 0; i < num; i++)
        {
            //for each row
            output+= '<tr>'
            for (var j = 0; j < num; j++)
            {
                output += '<td></td>';
            }
            output += '</tr>';

        }
        output += '</table>';
        return output;
    }
    //starting area
    var result = makeTable(16);
    $(".container").append(result);
    //Start with 16 by 16 of square divs - 
    //put inside a container div
 });

Answer 2

您一直在附加相同的变量...row 和“数据”。你不应该那样做。

从下面的代码可以看出，您需要在每个循环上创建var row = $("<tr>");，以便在将<td>（表格单元格）附加到新创建的行时引用它。

修改为只使用一个循环：

$(document).ready(function(){
  function makeTable(num) {
    var table = $("<table>"), row;
    
    for (var i = 0; i < num; i++){
      row = $("<tr>");
      table.append(row);
      row.append(Array(num + 1).join("<td></td>"));
    }
    return table;
  }

  $(".container").html(makeTable(16));
});

DEMO PLAYGROUND

---

当然，这不是生成表格的好方法。在每个循环上运行 jQuery 函数既慢又不好。您应该生成一个代表您的 DOM 结构的大字符串，然后将该字符串附加到需要的地方，jQuery 会从中生成一个 DOM 节点。

Answer 3

我为此编写了自己的 html，但它应该像使用两个嵌套的 for 循环获取大小输入值一样简单。这是我想出的：

$("#tableMaker").click(function () {
    $('.container').html("");
    $('.container').append("<table></table>");
    for (var i = 0; i < $('#size').val(); i++) {
        $('table').append("<tr></tr>");
        for (var j = 0; j < $('#size').val(); j++) {
            $('tr:last').append("<td>Column " + (j+1) + ", Row " + (i+1) + "</td>");
        }
    }
})

td {
    border: black solid 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="size" placeholder="Size" />
<button id="tableMaker" type="button">Generate Table</button>
<br />
<div class="container">
    <div />