2

この例を確認してください: http://jsfiddle.net/lulu2792/a9LZd/

innerHTML を使用してテーブル行のコンテンツ (セルのコンテンツを含む) を設定します。Firefox と Chrome でうまく動作します。ただし、IE7 にはバグがあります (IE9 互換モードにもあります)。テーブルの HTML 結果は次のとおりです。

<TABLE id=table1>
 <TBODY>
  <TR>
   <TD>
    Test
   </TD>
  </TR>
  <TR>
   ABC
   </TD>
  </TR>
 </TBODY>
</TABLE>

2 行目に注目してください。バグがあります。innerHTML が IE7 でこのバグを引き起こす理由がわかりません。この問題を修正するにはどうすればよいですか?

また、質問があります。次のようにテーブル要素内で tbody タグを使用しない場合:

var html = "<table id='table1'><tr><td>Test</td></tr></table>";

ブラウザは引き続きこのタグをレンダリングします。

上記の2つの質問に答えるのを手伝ってください。

4

2 に答える 2

8

innerHTMLプロパティを使用してIEでテーブルの一部を書き込むことはできません。DOMメソッドを使用する必要があります。innerHTMLを使用して、テーブル全体またはセルの内容を書き込むことができます。

MSDNに例があります：動的にテーブルを構築する。

MDNの例もあります：DOMテーブルインターフェイスの使用

他の場所に投稿したコード（ここに投稿する方がはるかに良い）：

// create table
var html = "<table id='table1'><tbody><tr><td>Test</td></tr></tbody></table>";
document.getElementById('div1').innerHTML = html;

テーブル全体が作成されるため、これは問題なく機能します。

// append a row into table
var tr = document.createElement('tr');
var td = document.createElement('td');
td.innerHTML = 'ABC';
tr.appendChild(td);
var s = tr.innerHTML;

上記はすべてのブラウザで正常に機能します。

tr.innerHTML = s;

おっと、セル（tdまたはth）のinnerHTMLにのみ割り当てることができ、テーブルの他の部分には割り当てることができません。

tr.innerHTML = '<td>' + 'ABC' + '</td>';

また同じ。

var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];

tBodiesプロパティを使用して、次のことを単純化できます。

var tbody = document.getElementById('table1').tBodies[0];
tbody.appendChild(tr);

trのinnerHTMLをいじらなければ、それはうまくいくでしょう。

次のこともできることに注意してください。

var tbody = document.getElementById('table1').tBodies[0];
var row = tbody.insertRow(-1);
var cell = row.insertCell(-1);
cell.innerHTML = 'whatever';

これで完了です。行全体のクローンを作成してから、innerHTMLを使用してセルの内容を変更することもできます。

于 2012-09-27T03:34:34.170 に答える
2

Internet Explorer には、テーブルへの HTML の追加に関する悪名高い問題があります。最良の解決策は、ブラウザー間で動作を正規化するサード パーティのライブラリを使用することです ( jQueryなどですが、他にもあります)。

jQuery の例:

// invokes a function when document is ready
// dollar symbol is "jQuery" alias inside function
jQuery(function($) {
    // select the table body and append a new row
    $('#table1 tbody').append('<tr><td>ABC</td></tr>');
});

また、その 2 行目に<td>開始タグがありません。

2 番目の質問: tbody は必要ありません (thead と tfoot がある場合、XHTML では必要だと思います)。

于 2012-09-27T03:31:34.570 に答える