2010-12-16 8 views
1

Ceci est une question plutôt simple, j'ai des problèmes pour insérer des données de Javascript dans un tableau HTML.Javascript insérer des données dans le tableau HTML

Voici un extrait de mon JavaScript:

Actualisé - Je ne me suis débarrassé des deux boucles et simplifiées en un seul, mais il y a encore un problème ..

for (index = 0; index < enteredStrings.length; index++) { 
     output.innerHTML += "<td>" + enteredStrings[index] + "</td>" 
     + "<td>" + enteredStringsTwo[index] + "</td>"; 
     nameCounter++; 
     total.innerHTML = "Total: " + nameCounter; 
    } 

Et est ici un sauf de ma page HTML:

<table id="nameTable"> 
    <tr> 
    <th>First</th><th>Last</th> 
    </tr> 

Mise à jour Image:

alt text

+0

Pourquoi avez-vous 2 boucles? Quelle est la différence entre eux? –

+0

Correction mais il y a toujours un problème. – TheStandardRGB

+0

vérifier edit2 dans ma réponse et voir si cela fonctionne pour vous. –

Répondre

5

Essayez ceci (sous la direction):

var tableContent = '<tr>'; 
for (index = 0; index < enteredStrings.length; index++) { 
    tableContent += "<td>" + enteredStrings[index] + "</td>"; 
    nameCounter++; // I don't know if this should be there, 
        // logically the counter should be incremented here as well? 
    total.innerHTML = "Total: " + nameCounter; 
} 
tableContent += '</tr><tr>'; 

for (index = 0; index < enteredStringsTwo.length; index++) { 
    tableContent += "<td>" + enteredStringsTwo[index] + "</td>"; 
    nameCounter++; 
    total.innerHTML = "Total: " + nameCounter; 
} 
tableContent += '</tr>'; 
output.innerHTML += tableContent; 

Edit2 (pour le code question mise à jour):

var tableContent = '<tr>'; 
for (index = 0; index < enteredStrings.length; index++) { 
    tableContent += "<td>" + enteredStrings[index] + "</td>" 
    + "<td>" + enteredStringsTwo[index] + "</td>"; 
    nameCounter++; 
    total.innerHTML = "Total: " + nameCounter; 
} 
tableContent += '</tr>'; 
output.innerHTML += tableContent; 

Edit3 (après avoir regardé le code envoyé par courrier électronique):

var tableContent = ""; 

for (index = 0; index < enteredStrings.length; index++) { 
    tableContent += "<tr><td>" + enteredStrings[index] + "</td>" 

    + "<td>" + enteredStringsTwo[index] + "</td></tr>"; 

    nameCounter++; 
    total.innerHTML = "Total: " + nameCounter; 
} 
output.innerHTML = tableContent; 
+0

il n'aidera pas puisque le navigateur crée le automatiquement puisque vous mettez à jour le innerHTML chaque fois. –

+0

@The Scrum Meister: désolé, je n'ai pas compris ce que vous dites. Je ne vois rien de logique avec mon code. –

+0

puisque la sortie est un élément, à chaque appel à output.innerHTML le navigateur va corriger le html pour qu'il soit correct. donc le premier appel est d'ajouter un ouvert seulement, mais le broswer ** fermera ** ce tr pour vous. de même pour le prochain changement qui ajoute le td. –

3

au lieu de fermer la td vous ouvrez de nouveaux essayer

for (index = 0; index < enteredStrings.length; index++) { 
    output.innerHTML += "<td>" + enteredStrings[index] + "</td>"; 
    total.innerHTML = "Total: " + nameCounter; 
} 

for (index = 0; index < enteredStringsTwo.length; index++) { 
    output.innerHTML += "<td>" + enteredStringsTwo[index] + "</td>"; 
    nameCounter++; 
    total.innerHTML = "Total: " + nameCounter; 
} 

MISE À JOUR: vous annexant le code HTML à la table au lieu de la ligne. Dans ce cas, le navigateur a créé une ligne pour vous automatiquement après l'ajout de chaque td.

+0

Cela ne semble pas fonctionner. – TheStandardRGB

+0

à quoi pointe la sortie? la table ou la rangée de table? Quel navigateur utilisez-vous? –

+0

output = document.getElementById ('nameTable'); et j'utilise Firefox. – TheStandardRGB

0

Avec une broche ht modifications dans votre code,

var outputTbl = document.getElementById('nameTable'); 

    var output = document.createElement("tr"); 
    outputTbl.appendChild(output); 

    for (index = 0; index < enteredStrings.length; index++) { 
     output.innerHTML += "<td>" + enteredStrings[index] + "</td>"; 
     total.innerHTML = "Total: " + nameCounter; 
    } 

    for (index = 0; index < enteredStringsTwo.length; index++) { 
     output.innerHTML += "<td>" + enteredStringsTwo[index] + "</td>"; 
     nameCounter++; 
     total.innerHTML = "Total: " + nameCounter; 
    } 
+0

Cela semble fonctionner cependant quand je tente d'entrer un second nom, il recrée une autre table. Comme le montre cette image. http://i54.tinypic.com/244dszr.jpg – TheStandardRGB

0

Si vous devez ajouter du code html interne ici.

<table id="nameTable" style="width:300px;"> 
    <tr> 
     <th>First</th><th>Last</th> 
    </tr> 
</table> 

Vous pouvez utiliser Jnerator dans ce cas.

Si ce sont vos données:

var data = [ 
    { first: 'Cole', last: 'Alan'}, 
    { first: 'Michael', last: 'Scott'} 
] 

Vous pouvez les ajouter à la table vous de la manière suivante:

for(var i=0; i<data.length; i++) { 
    var item = data[i]; 
    var row = $j.tr({ child:[$j.td(item.first), $j.td(item.last)] }); 
    nameTable.appendChild(row.dom()); 
} 
nameTotal.innerHTML = 'Total: ' + data.length; 

This is example.

Questions connexes