使用用户输入创建 Javascript 行答案

【问题标题】：Create Javascript rows with user input使用用户输入创建 Javascript 行
【发布时间】：2017-11-08 00:17:19
【问题描述】：

您将如何开始为下面提供的代码编写 for 循环：

<html>
<head>
</head>
<body>
Rows: <input name="rows" id="rows" type="text"/><br/>
<input type="submit" value="Make me a table!" onclick="makeTable();"/><br/><br/>

<table border="1" id="theTable">
</table>

<script type="text/javascript">
function makeTable(){

//Insert code here AND ONLY HERE!
//Write a for loop to create the number of rows specified in the "row" input field
</script>
</body>
</html>

【问题讨论】：

无论您是否使用 JavaScript 构建了“表格事物”，这都不难。你被困在哪里了？您是否已经完成了问题的各个步骤？您是否构建了任何伪代码来显示您应该做什么来回答问题？你的导师、教授或任何人没有给予任何指导吗？因为这感觉像是某种家庭作业，所以我假设你在相关课程中被教过如何解决这个问题。
所以在我可以使用的两个文本框中获取值。 var rows = document.getElementById("rows").value; var cols = document.getElementById("cols").value;
是的。嗯，这是第一步，我想。继续。如果您所做的任何事情都不起作用，请尝试调试它，查看 JavaScript 控制台 (F12) 是否有任何错误，然后在 Web 上搜索这些错误的解决方案。当您遇到无法理解的问题时，然后回来询问有关该问题的具体问题。但是：请花时间证明您已经尝试过解决方案，并说明您尝试的解决方案如何、在何处以及为什么不起作用。
非常感谢您的帮助。我认为这是制作循环的正确方法？ for (var r = 0; r

标签： javascript html-table

【解决方案1】：

由于我怀疑这是家庭作业，因此我不会提供完整的代码答案，而是为您提供一些希望对您有所帮助的指南。

你有 html 和 javascript，为了创建新的 html 元素，你需要使用 document.createElement(type) 函数来创建一个新元素，在你的情况下 - td/th？

然后你需要将它插入到你的表中您可以通过获取表格（通过 id/type）来做到这一点——在网上搜索这个非常简单。然后对创建的元素使用 append 方法。

您使用正常的 for 循环来完成所有这些过程，该循环将一直运行到您的 html 中输入标签的 .value（再次，搜索如何获取这些值）

祝你好运=]

【讨论】：

感谢您没有提供完整的代码，我正在按照您的步骤操作！谢谢
很高兴 :)，如果我的回答对您有帮助，请考虑投票或接受它作为您问题的答案。

【解决方案2】：

这是你要找的吗？

function makeTable(){

    // Get values of rows/cols inputs
    var rows = document.getElementById('rows').value;
    var cols = document.getElementById('cols').value;
    // Check the values are in fact numbers
    if (!isNaN(rows) && !isNaN(cols)) {
        // Get the table element
        var table = document.getElementById('theTable');

        // Iterate through rows
        for (var r = 0; r < rows; ++r) {
            // Create row element
            var tr = document.createElement('tr');

            // Iterate through columns
            for (var c  = 0; c < cols; ++c) {
                // Create cell element
                var td = document.createElement('td');
                // Setting some text content
                td.textContent = 'R: ' + r + ', C: ' + c;
                // Append cell to row
                tr.appendChild(td);
            }
            // Append row to table
            table.appendChild(tr);
        }
    }
}

【讨论】：

可以通过两个独立的for() 循环减少到O(n)。第一个将所有<td></td>s 连接在一起，因为我们知道列数是相同的。然后，只需将td 字符串（对于所有r 都相同）附加到tr。

【解决方案3】：

<!DOCTYPE html>
<html>
  <head>
<title>test</title>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
 <body>

  Rows: <input name="rows" id="rows" type="text"/><br/>
  Cols: <input name="cols" id="cols" type="text"/><br/>
  <input type="submit" value="Make me a table!" onclick="makeTable();"/>   <br/><br/>

  <table border="1" id="theTable">

  <script type="text/javascript">
  function makeTable(){

   var html = "";
   var row=$('#rows').val();
   var col=$('#cols').val();

   for(var i=0; i<row; i++){
  html+="<tr>";
   for(var j=0;j<col; j++)
   {
       html+= '<td> Your data </td>';
     }
    html+="</tr>"
    }

   $('#theTable').html(html);


    //Insert code here AND ONLY HERE!
    //Write a for loop to create the number of rows specified in the "row" input field
    //create a dom element for the row to be added to the table
  }
   </script>

  </body>
 </html>

我保持简单。希望对您有所帮助。

【讨论】：