Question

以下是我的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-Code：

    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-part，可以用输入单元格添加新行，但是我无法理解它有什么问题。

Answer 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>

我的Javascript for循环

1 个答案: