JavaScript。基于用户输入创建一个动态表

问题描述：

我想通过一个数字提示用户输入：integer，大于0，并且是数字。我做了while while while循环，似乎工作正常。有了这个数字，我必须将它传递给名为“genTable”的函数，并根据用户输入的内容创建一个具有动态行数的表格。然而，用我目前的代码，我似乎无法让表格出现在页面上。关于我出错的地方以及如何解决它的任何想法？JavaScript。基于用户输入创建一个动态表

<!DOCTYPE HTML> 

<html> 
<head> 
<title>jsLoopDemo</title> 

<!-- 
Honor Code: I acknowledge that this code represents my own work: CC 
Date: July 6, 2017 
--> 

<meta charset="utf-8" /> 
<meta name="description" content="Create a chart with rows based on a number 
user chose." /> 
<meta name="keywords" content="loop, row, dynamic" /> 
<meta name="author" content="" /> 


<script type="text/javascript"> 


    do{ 
     var numChose = prompt("Please enter an interger greater than zero."); 
    }while (isNaN(numChose) || numChose % 1 !== 0 || numChose < 1); 

    function genTable(numChose) 
    { 
     var table = document.createElement("TABLE"); 
     var tableBody = document.createElement("TBODY"); 
     table.appendChild(tableBody); 
     var myTableDiv = document.getElementById("mytable"); 


     for (var r = 0; r <= numChose; r++) 
      { 
       var tr = document.createElement("TR"); 
       tableBody.appendChild(tr); 
       var td = document.createElement("TD"); 
       tr.appendChild(td); 
       td.appendChild(document.createTextNode("Row " + r)); 
      } 
    myTableDiv.appendChild(table); 
    } 



</script> 



</head> 

<body> 

<div id="mytable"> 
</div> 

</body> 
</html>

答

两件事情：

您需要在提示符后实际调用的功能，所以您需要做后添加一行，则：

genTable(numChose);

这仍然无法工作，因为DOM不会准备好（myTableDiv将不确定），因此您需要将整个代码包装在事件监听器中：

document.addEventListener("DOMContentLoaded", function(event) { 
    //do work 
});

这工作很好，但是，我会很感激为什么我需要做genTable（numChose）的一些推理;如果它在函数的下一行。有什么不同？ – CChristiansen

写'function genTable（numChose）'只_defines_一个名为'genTable'的函数带有一个参数numChose，但不调用它，你仍然需要这样做。一个函数通常用于重用代码，因为它可以被重复调用。如果这只是在你的代码中只发生一次，你也可以废弃这个函数（只是使用函数中的代码），它就会起作用。 – mvuajua

答

移动<script>代码

<div id="mytable"> 
</div>

在 <body>

，使得元件上呈现DOM后而生成表并调用该函数

genTable(numChose);

你从用户获取号码后。

JavaScript。基于用户输入创建一个动态表

相关推荐