Je ne peux pas sortir des éléments dans mon tableau quand j'utilise une boucle for

Question

J'ai créé une fonction qui ajoute des lignes à ma table html en fonction du nombre d'entrées présentes. J'essaie de faire de la variable cdNoCell un ID unique avec la variable id, qui s'incrémente pour chaque ligne créée.

Le problème que j'ai, c'est que l'identifiant affiche le nombre total d'éléments dans ma table dans chaque ligne. Donc, si j'ai 4 éléments, il imprime:

sortie réelle:

ID Title Cost 
4  a  10 
4  b  12 
4  c  6 
4  d  10 

Sortie prévue:

ID Title Cost 
1  a  10 
2  b  12 
3  c  6 
4  d  10 

Mon code de fonction:

function showFunction(){ 
    var costArrayLength = costArray.length; 
    for (i = 0; i<costArrayLength; i++){ //for loop adding elements to table 
     var table = document.getElementById("myTable"); 
     var row = table.insertRow(-1); //adds each element to the bottom of table 
     var cdNoCell = row.insertCell(0); 
     var cdTitleCell = row.insertCell(1); 
     var cdCostCell = row.insertCell(2); //inserts 3 cells 
     var id = 1; 
     cdNoCell.innerHTML = id; 
     cdCostCell.innerHTML = costArray[i]; 
     cdTitleCell.innerHTML = titleArray[i]; 
     id++; 
    } 
} 

Answer 1

Vous devriez être en mesure de changer cette ligne

cdNoCell.innerHTML = id;

avec ce

cdNoCell.innerHTML = i + 1;

Ensuite, vous pouvez supprimer à la fois var id = 1; et id++; de votre code.

Answer 2

Puisque vous avez var id = 1; à l'intérieur de votre boucle, la boucle redémarrera et sortira 1 à chaque fois au lieu d'augmenter comme prévu.

Je suis un peu deviner sur vos tableaux, mais ci-dessous vous pouvez voir un extrait de travail. Gardez également à l'esprit que les fonctions d'insertion sont assez intelligentes pour connaître la cellule suivante ou .

titleArray = new Array("a","b", "c"); 
 
costArray = new Array(10, 20, 30); 
 

 
function showFunction(){ 
 
    var costArrayLength = costArray.length; 
 
    var id = 1; 
 
    
 
    for (i = 0; i<costArrayLength; i++){ //for loop adding elements to table 
 
     var table = document.getElementById("myTable"); 
 
     var row = table.insertRow(); //adds each element to the bottom of table 
 
     var cdNoCell = row.insertCell(); 
 
     var cdTitleCell = row.insertCell(); 
 
     var cdCostCell = row.insertCell(); //inserts 3 cells 
 
     cdNoCell.innerHTML = id; 
 
     cdCostCell.innerHTML = costArray[i]; 
 
     cdTitleCell.innerHTML = titleArray[i]; 
 
     id++; 
 
    } 
 
} 
 

 
showFunction();

<table id="myTable" border=1> 
 

 
</table>