我的 Javascript for 循环有什么问题答案

【问题标题】：What's wrong with my Javascript for-loop我的 Javascript for 循环有什么问题
【发布时间】：2017-09-01 19:03:09
【问题描述】：

这是我的 HTML 正文的内容：

<body> 
<p id="p1"></p>
<p id="p2"></p>
<table style="width:100%" id="theTable"> 
<thead id="head">
<tr>
    <th>@id</th>
    <th>@author</th>
    <th>@content</th>
</tr>
</thead>
<tbody id="body">
<tr >
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"> </td>
</tr>
</tbody>
<tfoot id="foot"></tfoot>
</table>
<button onclick="notMyFunction()">+</button>
<script src="first_js.js"> </script>
</body>

这是我的 js 代码：

    function notMyFunction(){
//Access the children of the table
        var x = document.getElementById("theTable").children;   
//Insert a row    
        var z = x[1].insertRow(0); 
//Access the indexes of the rows
        var y = x[1].rows.length-1;    
//The number of the cells in the last row                            
        var l = x[1].rows[y].cells.length;                  
//Test if everything working properly
//This seems to be the case because y++ with everz click and l=3 for ever         
       document.getElementById("p1").innerHTML=y;
        document.getElementById("p2").innerHTML=l;
//create a new <input> for the new-added row
    var newInput = document.createElemet("input");
    newInput.setAttribute('type', 'text');
//This loops seems to be incorrect
    for (var i = 0, m=l; i < m ; i++) {
        x[1].rows[0].insertCell(i);
        x[1].rows[0].cells[i].appendChild(newInput);
    }
    }

它必须是一个可以动态添加行的表。但是 createElement 部分，使得可以使用输入单元添加新行不起作用，我不明白它有什么问题。

【问题讨论】：

那里有一个非标准的 for 循环。它只需要 3 个参数：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@jmargolisvt 他只有 3 个参数。您可以在第一声调中初始化多个变量。

标签： javascript html input html-table

【解决方案1】：

问题是您将相同的<input> 元素附加到每个单元格中。 appendChild() 不会复制元素，它只是将其附加到新单元格，这意味着它必须从前一个单元格中删除。您需要在循环中使用document.createElement() 来进行新的输入。

你还有一个错字：createElemet。

完整代码：

function notMyFunction() {
  //Access the children of the table
  var x = document.getElementById("theTable").children;
  //Insert a row    
  var z = x[1].insertRow(0);
  //Access the indexes of the rows
  var y = x[1].rows.length - 1;
  //The number of the cells in the last row                            
  var l = x[1].rows[y].cells.length;
  //Test if everything working properly
  //This seems to be the case because y++ with everz click and l=3 for ever         
  document.getElementById("p1").innerHTML = y;
  document.getElementById("p2").innerHTML = l;
  for (var i = 0, m = l; i < m; i++) {
    //create a new <input> for the new-added row
    var newInput = document.createElement("input");
    newInput.setAttribute('type', 'text');
    x[1].rows[0].insertCell(i);
    x[1].rows[0].cells[i].appendChild(newInput);
  }

}

<p id="p1"></p>
<p id="p2"></p>
<table style="width:100%" id="theTable">
  <thead id="head">
    <tr>
      <th>@id</th>
      <th>@author</th>
      <th>@content</th>
    </tr>
  </thead>
  <tbody id="body">
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"> </td>
    </tr>
  </tbody>
  <tfoot id="foot"></tfoot>
</table>
<button onclick="notMyFunction()">+</button>

【讨论】：

非常感谢你的帮助，你救了我