Erstellen Sie einen Titel für jede Spalte in einer Tabelle mit einer Schleife. JavaScript

Question

Ich möchte den Titel für jede Spalte in einer Tabelle zu sein "A", "B", "C" usw. Ich möchte in der Lage sein zu ändern, wie viele Spalten es gibt, also möchte ich eine Schleife verwenden. -Code so weit:

JavaScript:

<script> 
document.getElementById('dtable').innerHTML = ''; 
var table = document.getElementById("dtable") 
Rows = 4 
for (var count = 0; count <= Rows; count++) { 
    var header = table.createTHead(0); 
    var row = header.insertRow(0); 
    var character = String.fromCharCode(65 + count); 
    var cell = row.insertCell(count); 
    cell.innerHTML =('<b>'+character+'</b>'); 
} 
</script> 

HTML:

<div id='div1'><table id="dtable"></table></div> 

Answer 1

Sie wurden für jede Spalte eine Zeile im Header zu schaffen. Das Verschieben der thead -Erzeugung außerhalb der Schleife hat es behoben.

document.getElementById('dtable').innerHTML = ''; 
 
var table = document.getElementById("dtable"); 
 
var header = table.createTHead(0); 
 
var row = header.insertRow(0); 
 
Rows = 4 
 
for (var count = 0; count <= Rows; count++) { 
 
    var character = String.fromCharCode(65 + count); 
 
    var cell = row.insertCell(count); 
 
    cell.innerHTML =('<b>'+character+'</b>'); 
 
}

<div id='div1'><table id="dtable"></table></div>

Answer 2

Sie wollen nicht eine neue Zeile innerhalb der Schleife rechts schaffen? Verschieben Sie die Kopf- und Zeilenerstellung außerhalb der Schleife.

wie:

<script> 
document.getElementById('dtable').innerHTML = ''; 
var table = document.getElementById("dtable") 
Rows = 4 
var header = table.createTHead(0); 
var row = header.insertRow(0); 
for (var count = 0; count <= Rows; count++) { 
    var character = String.fromCharCode(65 + count); 
    var cell = row.insertCell(count); 
    cell.innerHTML =('<b>'+character+'</b>'); 
} 
</script> 

Wenn Sie es mit Grenzen wie eine Tabelle aussehen wollen und so Sie haben CSS-Styling hinzufügen, aber das sollte abcde

Answer 3

@Dilly, Verwenden dieser Geige drucken ... Wie viele andere Antworten für die Post - Sie müssen eine Zeile einmal und Spalten so oft wie Sie möchten erstellen ... so Schleife für Spalten nicht Zeilen. Was mich auch daran erinnert, Ihnen zu sagen - Bitte verwenden Sie nicht den Variablennamen der Schleifenzählung als "Zeile", die für Verwirrung sorgt. Sie sollten es nennen - zum Beispiel numOfColumns.

Dank dem Kommentar habe ich diesen Kommentar hinzugefügt.

https://jsfiddle.net/shemdani/xjpekb94/1/

document.getElementById('dtable').innerHTML = ''; 
var table = document.getElementById("dtable") 
var row = table.insertRow(0); 
Rows = 4 
for (var count = 0; count < Rows; count++) { 
    var character = String.fromCharCode(65 + count); 
    var cell = row.insertCell(count); 
    cell.innerHTML =('<b>'+character+'</b>'); 
} 

Answer 4

Ihr Problem ist, dass Sie den Header und die Zeile in Ihrer for Schleife erstellen, was bedeutet, dass Sie eine neue Zeile jedes Mal erstellt werden sollen, die Probleme mit row.insertCell verursacht. Die erste Iteration funktioniert, weil Sie eine Zelle an der 0. Position einfügen, aber die zweite Iteration der Schleife versucht, eine Zelle an der ersten Position einzufügen, wenn eine 0-te Positionszelle nicht existiert, weshalb sie einen Fehler auslöst. Versuchen Sie, diese und es sollte für Sie arbeiten:

document.getElementById('dtable').innerHTML = ''; 
 
var table = document.getElementById("dtable"); 
 
var Rows = 4; 
 
var header = table.createTHead(0); 
 
var row = header.insertRow(0); 
 

 
for (var count = 0; count <= Rows; count++) { 
 
    var character = String.fromCharCode(65 + count); 
 
    var cell = row.insertCell(count); 
 
    cell.innerHTML =('<b>'+character+'</b>'); 
 
}

<div id='div1'><table id="dtable"></table></div>