Question

我尝试使用javascript创建表格。用户使用此表单插入行数。我不知道如何正确输出此表。这个但我觉得我在javascript代码中有问题。有人请告诉我如何输出一个以这种形式插入行数的表格？这是我的代码

<html>
  <head>
    <title>
    </title>
  </head>
  <body>
    <form name="table" id="hey">
      Insert nr of rows <input type="text"/>
    </form>

    <script>
     var nr=document.getElementById("hey");
     var c=parseInt("nr");
     for(int i=0;i<c;i++){
         print("<table><tr><td></td></tr></table>");
     }
    </script>
    </script>
  </body>
</html>

Answer 1

您的for循环中出现错误，您有：

for(int i=0;i<c;i++){
     print("<table><tr><td></td></tr></table>");
 }

这应该是：

for(i=0;i<c;i++){
    print("<table><tr><td></td></tr></table>");
}

至于你的实际问题，你可以尝试这样做：

<强> HTML

Insert number of rows
<input type="text" id="hey" />
<input type="button" value="Generate table" id="btnShow">
<div id="container"></div>

<强> CSS

#container {
    height:50vh;
    width:50vw;
    background-color:#eee;
}

<强>的JavaScript

//Event listener for the button.
document.getElementById ("btnShow").addEventListener ("click", generateTable, false);
//Function generating the table.
function generateTable() {
    //Get the value the user gave
    var nr = document.getElementById("hey").value;
    //Make it an Int
    var c = parseInt(nr);
    //Get the div containing the table
    var div = document.getElementById("container");
    //Write the table
    div.innerHTML += "<table border='1' id='table'>";
    for (i = 0; i < c; i++) {
        //Write the rows and cells
        document.getElementById('table').innerHTML += "<tr><td>One</td><td>Two</td></tr>"
    }
}

<强> JsFiddle

修改

我已经更新了代码，以便在第二次添加行之前清除div。

<强> Updated fiddle

<强> JavaSript

//Event listener for the button. document.getElementById ("btnShow").addEventListener ("click", generateTable, false); //Function generating the table. function generateTable() { //Get the value the user gave var nr = document.getElementById("hey").value; //Make it an Int var c = parseInt(nr); //Get the div containing the table var div = document.getElementById("container"); //Clear the container div <----------- Note this div.innerHTML = " "; //Write the table div.innerHTML += "<table border='1' id='table'>"; for (i = 0; i < c; i++) { //Write the rows and cells document.getElementById('table').innerHTML += "<tr><td>One</td><td>Two</td></tr>" } }

希望这有帮助！

Answer 2

这就是正确的表格。

＆LT;表＆gt; / *这是包含所有行和表数据* /

的表

＆LT; tr> / *这代表表格行* /

＆LT; td＆gt; / *这代表行内的表数据。您可以将这些视为列* /

＆LT; / td＆gt;

＆LT; td＆gt;

＆LT; / td＆gt;

＆LT; / tr＆gt;

＆LT; / table＆gt; 除非您尝试做一些非常具体的事情，否则您不需要所有额外的编码。

尝试使用表单在javascript中创建表以获取行数

2 个答案: