修改为仅使用一个循环：

Question

我们的想法是构建一个接受输入并使用它来构建网格的函数。我首先尝试建立网格功能，并且我有一个特殊的错误。我搜索了几个小时，但答案都告诉我一个简单的＆＃34;追加＆＃34;应该工作。

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

html只是一个基本文件，可以通过简单的方式正确导入javascript（全部测试过）： div class =＆＃34; container＆＃34; /格

代码：

  $(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和'data`。你不应该这样做。

从下面的代码中可以看出，您需要在每个循环上创建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循环一样简单地获取大小输入的值。这就是我想出的：

＆＃13;

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

＆＃13;

td {
    border: black solid 1px;
}

＆＃13;

<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 />

＆＃13;

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

3 个答案:

修改为仅使用一个循环：