如何通过 Javascript 显示输入的列表行？答案

【问题标题】：How do I display input column table rows through Javascript?如何通过 Javascript 显示输入的列表行？
【发布时间】：2015-11-09 14:49:12
【问题描述】：

我正在尝试编写一个程序，该程序将为我的 Table 元素提供适当的列和行我能够执行行部分但我卡在列上，我的代码无法正常工作是什么？

<body>
    <table>
        <script>
            var c = parseInt(prompt("Enter column ")) // 10
            var r = parseInt(prompt("Enter column ")) // 10

            while (0 < c) {
                c--;
                document.write("<td style></td>")
            }

            var r = parseInt(prompt("Enter row "))
            while (0 < r) {
                r--;
                document.write("<tr></tr>")
            }
        </script>
    </table>
</body>

【问题讨论】：

标签： javascript html-table

【解决方案1】：

对于初学者，您不能像对待 PHP 那样对待 Javascript。您冒着标签没有写在您想要的位置，而是在文档开头的风险。

我建议您阅读 w3schools 上的“Manipulating DOM”

现在，回答你的问题，最简单的方法是使用 jquery，这样你就不需要处理几种方法来操作 DOM 并使其跨浏览器

var c = parseInt(prompt("Columns"));
var r = parseInt(prompt("Rows"));

for (var i = 0; i < r; i++) {
    var newRow = $("<tr></tr>");
    for (var j = 0; j < c; j++) {
        newRow.append("<td></td>");
    }
    $("#customTable").append(newRow);
}

table, tr, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table id="customTable" width="100%"></table>

现在，如果您需要香草 javascript（即没有 Jquery）

var c = parseInt(prompt("Columns"));
var r = parseInt(prompt("Rows"));
var table = document.getElementById("customTable");

for (var i = 0; i < r; i++) {
    var newRow = document.createElement("tr");
    for (var j = 0; j < c; j++) {
        var newColumn = document.createElement("td");
        newRow.appendChild(newColumn);
    }
    table.appendChild(newRow);
}

table, tr, td {
    border: 1px solid black;
}

&lt;table id="customTable" width="100%"&gt;&lt;/table&gt;

【讨论】：

【解决方案2】：

列由嵌套在行中的单元格定义。此外，您需要多次运行（对于每一行），因此您不能使用该变量。

试试下面的代码：

<script>
   var c = parseInt(prompt("Enter column ")) // 10
   var r = parseInt(prompt("Enter row ")) // 10
   var cTmp = c;

   while(0<r){
      r--;
      cTmp = c;
      document.write("<tr>")
      while(0<cTmp){
          cTmp--; 
          document.write("<td style></td>")
      }
      document.write("</tr>")
   }
</script>

编辑

您应该注意，html 表格不是由行和列定义的，而是由行和每行中的单元格定义的。本质上，这会创建列，但我们为每一行重新定义它们。

【讨论】：

您是否运行过此代码，它会旋转并挂起。 JavaScript 中的 while 方法，我一直尝试使用它，但在浏览器上并不好，我认为最好只使用 for。
现在应该没问题了，在切换变量时我在条件中省略了一个
谢谢，但我对它的工作原理有点困惑，它指定在哪一行代码中打印出用户提示的行数（或列数）？
外部循环执行行。内部循环执行列（实际上是每一行中的单元格）
啊，谢谢，说得更清楚了，还有一个问题，为什么我们需要额外的变量 cTmp？