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。您担心标签不会写在您想要的位置，而是写在文档的开头。

我建议您阅读＆＃34; Manipulating DOM＆＃34;超过w3schools

现在，回答你的问题，实现这一目标的最简单方法是使用jquery，这样你就不需要处理几种操作DOM并使其成为crossbrowser的方式

＆＃13;

contains(...)

＆＃13;

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);
}

＆＃13;

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

＆＃13;

现在，如果你需要vanilla javascript（即没有Jquery）

＆＃13;

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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 个答案: