10 
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>";

Javascriptを使ってテーブルを描きたい。だから私は上記のようなコードを書きました。10列の1行を描くと思いますが、うまくいきません。誰もがこの問題について知っていますか？

4

2 に答える 2

33

私も何年も前にこの問題に遭遇しました。

問題は、このinnerHTMLプロパティを使用して HTML を追加する場合、各更新後に、基になるエンジンが閉じられていないタグを閉じる (そして他の不適切な HTML を修正する) ことです。そのため、2 行目以降ではタグ<table>と<tr>タグが自動的に閉じられ、それ以降のすべてのコンテンツはテーブルの外に書き込まれます。

方法 1 (簡単な方法)

文字列を使用してテーブル全体の HTML を格納し、一度にすべて更新します。

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;

フィドル

方法 2 (より良い方法)

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

フィドル

強化された方法 2 (さらに優れた方法)

HTML 属性の代わりにCSSを使用します。後者は一般に、最新の仕様では減価償却されます。

CSS の学習を開始するための優れたリソースは、Mozilla Developer Networkです。

フィドル

方法 3 (長い道のりですが、長期的には最善の方法)

jQueryを使用します。

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

フィドル

于 2012-12-08T07:40:50.187 に答える
2

主な問題は、属性が引用されていないことだと思います。

ただし、ほとんどの場合、ループ内のdom要素のコンテンツを繰り返し更新することはお勧めできません。domコンテンツを更新するたびに、ページレイアウトが最新であることを確認するために、ブラウザーによって内部作業が実行されます。

html文字列をローカルで作成し、完了したら最後の更新を1回行います。（もちろん、属性が引用されていることを確認してください）

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;
于 2012-12-08T07:34:08.777 に答える