IE では <TABLE> に行を動的に追加できませんか?

StackOverflow https://stackoverflow.com/questions/812693

質問

JSON オブジェクトをダウンロードし、そのデータを使用して JavaScript DOM 関数を使用して HTML <table> に行を追加する AJAX アプリケーションがあります。完璧に機能します...Internet Explorer を除く。IE ではいかなる種類のエラーも発生せず、コードがブラウザーによって実行されていることをできる限り確認しましたが、まったく効果がありません。問題を説明するために、この簡単で汚いページを作成しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body>

<table id="employeetable">
    <tr>
        <th>Name</th>
        <th>Job</th>
    </tr>
</table>

<script type="text/javascript">
    function addEmployee(employeeName, employeeJob) {
        var tableElement = document.getElementById("employeetable");
        if (tableElement) {
            var newRow = document.createElement("tr");
            var nameCell = document.createElement("td");
            var jobCell = document.createElement("td");
            nameCell.appendChild(document.createTextNode(employeeName));
            jobCell.appendChild(document.createTextNode(employeeJob));
            newRow.appendChild(nameCell);
            newRow.appendChild(jobCell);
            tableElement.appendChild(newRow);
            alert("code executed!");
        }
    }

    setTimeout("addEmployee(\"Bob Smith\", \"CEO\");", 1000);
    setTimeout("addEmployee(\"John Franks\", \"Vice President\");", 2000);
    setTimeout("addEmployee(\"Jane Doe\", \"Director of Marketing\");", 3000);
</script>

</body></html>

IE 8 は試していませんが、IE 7 と IE 6 の両方で、追加されるはずの行が表示されません。理由がわかりません。誰かがこの問題に対する良い回避策を知っていますか、それとも私が何か間違ったことをしているのでしょうか?

役に立ちましたか？

解決

次のように、新しいTRを追加するTBODY要素を作成し、テーブルにTBODYを追加する必要があります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body>

<table id="employeetable">
    <tr>
        <th>Name</th>
        <th>Job</th>
    </tr>
</table>

<script type="text/javascript">
    function addEmployee(employeeName, employeeJob) {
        var tableElement = document.getElementById("employeetable");
        if (tableElement) {
            var newTable = document.createElement('tbody');   // New
            var newRow = document.createElement("tr");
            var nameCell = document.createElement("td");
            var jobCell = document.createElement("td");
            nameCell.appendChild(document.createTextNode(employeeName));
            jobCell.appendChild(document.createTextNode(employeeJob));
            newRow.appendChild(nameCell);
            newRow.appendChild(jobCell);
            newTable.appendChild(newRow);   // New
            tableElement.appendChild(newTable);   // New
            alert("code executed!");
        }
    }

    setTimeout("addEmployee(\"Bob Smith\", \"CEO\");", 1000);
    setTimeout("addEmployee(\"John Franks\", \"Vice President\");", 2000);
    setTimeout("addEmployee(\"Jane Doe\", \"Director of Marketing\");", 3000);
</script>

</body></html>

他のヒント

明らかに、IEでは、Table要素ではなくTBody要素に行を追加する必要があります... Ruby-Forum のディスカッションをご覧ください。

そこで議論を広げて、＆lt; table＆gt;通常、マークアップは明示的な＆lt; thead＆gt;なしで行われます。および＆lt; tbody＆gt;マークアップ、ただし＆lt; tbody＆gt; ELEMENTは、＆lt; table＆gt;のように、実際に新しい行を追加する必要がある場所です。 ＆lt; tr＆gt;が含まれていません要素を直接。

編集：IEでも使えるようになりました！insertSiblingNodesAfter は兄弟のparentNodeを使用します。これはIEではtbodyになります。

DOM クロスブラウザーを操作しようとすると、どのような問題が発生するのかを知るのは困難です。すべての主要なブラウザで完全にテストされ、問題点が考慮されている既存のライブラリを使用することをお勧めします。

私は個人的に MochiKit を使用しています。ここで DOM 操作について詳しく知ることができます。http://mochikit.com/doc/html/MochiKit/DOM.html

最終的な関数は次のようになります。

function addEmployee(employeeName, employeeJob) {
    var trs = getElementsByTagAndClassName("tr", null, "employeetable");
    insertSiblingNodesAfter(trs[trs.length-1], TR({}, TD({}, employeeName), TD({}, employeeJob));
    alert("code executed!");
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top