CODEWITHSUNDEEP
javascripthtmlinputhtml-table
Subhan Asadli
Subhan Asadli

Reputation: 330

What's wrong with my Javascript for-loop

Here is the content of my HTML-body:

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

And this is my 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);
    }
    }

It must be a table which rows can be added dynamic. but the createElement-part, making it possible to add new rows with input-cells doesn't work, and I can't understand what is wrong with it.

Upvotes: 1

Views: 53

Answers (1)

Barmar
Barmar

Reputation: 780974

The problem is that you're appending the same <input> element into each cell. appendChild() doesn't make a copy of the element, it simply appends it to the new cell, which means it has to be removed from the previous cell. You need to use document.createElement() in the loop to make a new input.

You also had a typo: createElemet.

Full 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;
  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>

Upvotes: 1

Related Questions