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

Question

我正在尝试编写一个程序，该程序将为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>

Answer 1

首先，您不能像使用PHP那样对待Javascript。 您冒着将标签写在所需位置而不是文档开头的风险。

我建议您通过w3schools阅读“ 操作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; }

 <table id="customTable" width="100%"></table>

Answer 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显示输入列表行？

问题描述

2 个解决方案

解决方案1
1 2015-11-09 15:15:14

解决方案2
0 已采纳 2015-11-09 14:52:32

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

问题描述

2 个解决方案

解决方案1 1 2015-11-09 15:15:14

解决方案2 0 已采纳 2015-11-09 14:52:32

解决方案1
1 2015-11-09 15:15:14

解决方案2
0 已采纳 2015-11-09 14:52:32