Quel est le problème avec mon Javascript pour la boucle

Voici le contenu de mon HTML-corps:Quel est le problème avec mon Javascript pour la boucle

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

Et ceci est mon 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); 
    } 
    }

Il doit être une table rangées peut être ajouté dynamique. mais la partie createElement, qui permet d'ajouter de nouvelles lignes avec des cellules d'entrée, ne fonctionne pas, et je ne peux pas comprendre ce qui ne va pas.

Source

2017-09-01 Subhan Asadli

Vous avez une boucle pour y non standard. Cela ne prend que 3 paramètres: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for – jmargolisvt

@jmargolisvt Il n'a que 3 paramètres. Vous êtes autorisé à initialiser plusieurs variables dans le premier ton. – Barmar

Le problème est que vous ajoutez le même élément <input> dans chaque cellule. appendChild() ne fait pas une copie de l'élément, il l'ajoute simplement à la nouvelle cellule, ce qui signifie qu'il doit être retiré de la cellule précédente. Vous devez utiliser document.createElement() dans la boucle pour créer une nouvelle entrée. Vous avez également eu une coquille: createElemet.

code complet:

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>

Source

2017-09-01 19:10:22 Barmar

Je suis extrêmement reconnaissant pour votre aide, vous m'avez sauvé –

Quel est le problème avec mon Javascript pour la boucle

Répondre

Questions connexes