0

次のようにJavascriptを使用してテーブルにデータを入力するコードがあります。

var myResponse = document.getElementById("jsonPlaceHolder");
myResponse.innerHTML += "<table border=1> <tr> <td> User Id </td> <td> Question </td> <td> Link Question </td>  </tr>";
for (var i = 0; i < 25; i++) {
    myResponse.innerHTML += "<tr>"
    myResponse.innerHTML += "<td>" + jsonObj[i]["user_id"] + "</td>";
    myResponse.innerHTML += "<td>" + jsonObj[i]["text"] + "</td>";
    myResponse.innerHTML += "</tr>"
}
myResponse.innerHTML += "</table>";

このコードの問題は、このテーブルを実行すると for ループ内で継続されないことです。追加すると

        myResponse.innerHTML += "<table><tr>"

私のforループ内で、テーブルが作成されます。ちょっとおかしくないですか？、

DOM要素の現在のinnerHTML+=に追加するために使用しているため。

4

2 に答える 2

4

innerHTML について最も誤解されていることの 1 つは、API の設計方法に起因します。+ および = 演算子をオーバーロードして、DOM 挿入を実行します。これにより、実際には innerHTML が変数ではなく関数のように振る舞うのに、単に文字列操作を行っているだけだとプログラマーに思わせます。innerHTML が次のように設計されていれば、混乱が少なくなります。

element.innerHTML(' HTMLをここに'); 残念ながら、API を変更するには遅すぎるため、単なる属性/変数ではなく、実際には API であることを理解する必要があります。

innerHTML を変更すると、ブラウザの HTML コンパイラが呼び出されます。HTMLファイル/ドキュメントをコンパイルするのと同じコンパイラです。innerHTML が呼び出す HTML コンパイラについては、特別なことは何もありません。したがって、html ファイルに対してできることはすべて、innerHTML に渡すことができます (1 つの例外は、埋め込まれた JavaScript が実行されないことです - おそらくセキュリティ上の理由から)。

これは、ブラウザ開発者の観点からは理にかなっています。ブラウザーに 2 つの別個の HTML コンパイラーが組み込まれているのはなぜですか? 特に、HTML コンパイラが巨大で複雑な獣であるという事実を考えると。

これの欠点は、不完全な HTML が HTML ドキュメントの場合と同じように処理されることです。テーブル内にない要素の場合、ほとんどのブラウザーは単純にそれを取り除きます (ご自分で確認したように)。それは本質的にあなたがやろうとしていることです - 無効/不完全なHTMLを作成してください。

innerHTML解決策は、完全な HTMLを提供することです。

    var htmlString = "<table border=1> <tr> <td> User Id </td> <td> Question </td> <td> Link Question </td>  </tr>";
    for (var i = 0; i < 25; i++) {
        htmlString  += "<tr>"
        htmlString  += "<td>" + jsonObj[i]["user_id"] + "</td>";
        htmlString  += "<td>" + jsonObj[i]["text"] + "</td>";
        htmlString  += "</tr>"
    }
    htmlString += "</table>"
    myResponse.innerHTML += htmlString;
于 2013-04-10T05:20:02.763 に答える
1

DOM API を使用して DOM を操作します。

var myResponse = document.getElementById("jsonPlaceHolder");
var table = document.createElement('table'),
    headings = ["User ID", "Question", "Link Question"];
table.style.border = "1";

var r = table.insertRow(-1);

for (var i = 0; i < 3; i++) {
    (function(){
        return r.insertCell(-1);
    })().innerHTML = heading[i];
}

for (var i = 0; i < 25; i++) {
    r = table.insertRow(-1);

    var userid = r.insertCell(-1),
        text = r.insertCell(-1);

    userid.innerHTML = jsonObj[i]["user_id"];
    text.innerHTML = jsonObj[i]["text"];
}

myResponse.appendChild(table);
于 2013-04-10T05:25:52.820 に答える