HTML: dessiner la table en utilisant innerHTML

Question

document.getElementById("outputDiv").innerHTML = ""; 
document.getElementById("outputDiv").innerHTML += "<table border=1 width=100%><tr>"; 
for(j=1;j<=10;j++) 
{ 
    document.getElementById("outputDiv").innerHTML += "<td align=center>"+String.fromCharCode(j+64)+"</td>"; 
} 
document.getElementById("outputDiv").innerHTML += "</tr></table>"; 

Je veux dessiner un tableau en utilisant Javascript. J'ai donc écrit le code comme ci-dessus. Je pense qu'il dessine une ligne qui a 10 colonnes, mais cela ne fonctionne pas. Quelqu'un sait à propos de ce problème ???

Answer 1

Je pense que le problème principal est que vos attributs ne sont pas cités. Mais il est presque toujours une mauvaise idée de mettre à jour de manière répétée le contenu d'un élément dom dans une boucle. Chaque fois que vous mettez à jour le contenu dom, le navigateur effectue un travail interne pour s'assurer que la mise en page est actuelle.

Je construirais la chaîne html localement, puis ferais une dernière mise à jour une fois terminé. (Et bien sûr, assurez-vous que vos attributs sont indiqués)

document.getElementById("outputDiv").innerHTML = ""; 

var newTable = "<table border='1' width='100%'><tr>"; 
for(j = 1; j <= 10; j++) { //opening braces should always be on the same line in JS 
    newTable += "<td align='center'>" + String.fromCharCode(j+64) + "</td>"; 
} 
newTable += "</tr></table>"; 

document.getElementById("outputDiv").innerHTML = newTable; 

Answer 2

J'ai également rencontré ce problème il y a des années. Le problème est que lorsque vous utilisez la propriété innerHTML pour ajouter du HTML, après chaque mise à jour, le moteur sous-jacent fermera la balise non fermée (et corrigera d'autres mauvais HTML) pour vous. Donc, après la deuxième ligne, les étiquettes <table> et <tr> sont automatiquement fermées et tout le contenu après cela sera simplement écrit à l'extérieur de la table.

---

Méthode 1 (La manière facile)

Utilisez une chaîne pour stocker le code HTML pour toute la table et le mettre à jour à la fois.

var HTML = "<table border=1 width=100%><tr>"; 
for(j=1;j<=10;j++) 
{ 
    HTML += "<td align=center>"+String.fromCharCode(j+64)+"</td>"; 
} 
HTML += "</tr></table>"; 
document.getElementById("outputDiv").innerHTML = HTML; 

Fiddle

---

Méthode 2 (La meilleure façon)

utiliser des fonctions DOM

var table = document.createElement('table'); 
table.setAttribute('border','1'); 
table.setAttribute('width','100%') 
var row = table.insertRow(0); 
for(j=1; j<=10; j++){ 
    var text = document.createTextNode(String.fromCharCode(j+64)); 
    var cell = row.insertCell(j-1); 
    cell.setAttribute('align','center') 
    cell.appendChild(text); 
} 
document.getElementById("outputDiv").appendChild(table); 

Fiddle

---

Méthode 2 améliorée (La meilleure façon encore)

Utilisation CSS au lieu des attributs HTML. Ce dernier est généralement déprécié aux dernières spécifications.

Une excellente ressource pour commencer à apprendre CSS est le Mozilla Developer Network

Fiddle

---

Méthode 3 (Le long chemin, mais le meilleur à long terme)

Utilisation jQuery.

$('<table>').append('<tr>').appendTo('#outputDiv'); 
for(j=1; j<=10; j++) 
    $('<td>').text(String.fromCharCode(j+64)).appendTo('tr'); 

Fiddle