ループを使用してテーブルの各列のタイトルを作成します。 JavaScript

Question

テーブルの各列のタイトルをbe'A '、' B '、' C 'などにしたいので、何列あるかを変更してループを使いたいと思っています。これまで コード：

は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

あなたは、各列のヘッダーに1行を作成されました。 ループの外にtheadの作成を移動すると、ループが固定されました。

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

あなたは、ループ、右の内側に新しい行を作成したくありませんか？ループの外側でヘッドとローの作成を移動します。

のような：

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

あなたはそれが国境やなと、テーブルのように見えるしたい場合は、CSSスタイルを追加する必要がありますが、それは

Answer 3

@Dilly、 使用ABCDEこのフィドルを印刷する必要があります...投稿のための他の多くの答えとして - 行を1回と列を何回でも作成する必要があります。どちらも私にあなたに教えてくれます。ループカウント変数名を混乱の原因となる「行」として使用しないでください。たとえば、numOfColumnsという名前にする必要があります。

コメントのおかげで、私はこの解説を追加しました。

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

あなたの問題は、あなたが新しい行にrow.insertCellで問題が発生するたびに、作成されることを意味し、あなたのforループ、内部ヘッダと行を作成しているということです。最初の反復は、0番目の位置にセルを挿入しているために機能しますが、0番目の位置のセルが存在しない場合、ループの2番目の反復で1番目の位置にセルが挿入されるため、エラーが発生します。これを試してみて、それがあなたのために働く必要があります。

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>