Document Object Model
Written 9/2/00
3. TABLE
以下は IE4 以上について述べています。 その他ではたぶん動きません。
■rows
TABLE の <TR> に相当する行を参照するのに rows メソッドを使います。 
  table.rows
これは TABLE のすべての行のコレクションを指しています。 各行は次のように指します。 
  table.rows(0)
  table.rows(1)
       ...
12
34

上のような TABLE があるとします。コードは次のようです。 

  <TABLE ID=tbl1 BORDER>
   <TR><TD>1</TD><TD>2</TD></TR>
   <TR><TD>3</TD><TD>4</TD></TR>
  </TABLE>
１行目のコードは次のように拾えます。 
  alert(tbl1.rows(0).outerHTML);
■cells
行の中の <TD>、<TH> に相当するセルは cells メソッドで拾えます。 
  table.rows(irow).cells
例えば、１行目の１番目の文字列は次のように拾います。 
  alert(tbl1.rows(0).cells(0).innerHTML);
JavaScript では行・セルとも [ ] 演算子が使えます。 
  tbl1.rows[0].cells[0]
■複雑なTABLE
12
3

例えば上のような TABLE があるとします。コードは次のようです。 

 <TABLE ID=tbl2 BORDER>
  <TR><TD ROWSPAN=2>1</TD><TD>2</TD></TR>
  <TR><TD>3</TD></TR>
 </TABLE>
この場合、3としているセルはどのように参照すればよいでしょう。
それは上のコードから想像がつくように、２行目の１番目です。 
  alert(tbl2.rows(1).cells(0).innerHTML);
ようするにコードを思い浮かべてみれば、参照方法も分かるということです。
■セルの挿入
12
34

行を追加するには、次のようにします。 

  table.insertRow(index)
index が0なら先頭に、1なら1行目と2行目の間に行を挿入します。 -1なら一番下に追加します。デフォルトは-1です。
返り値は挿入された TR オブジェクトです。

セルを追加するには、次のようにします。 

  tr.insertCell(index)
index が0なら先頭に、1なら1番目と2番目のセルの間にセルを挿入します。 -1なら一番右に追加します。デフォルトは-1です。 
  var objtr = tbl3.insertRow();
  var objc1 = objtr.insertCell();
  var objc2 = objtr.insertCell();
  objc1.innerHTML = "5";
  objc2.innerHTML = "6";
■セルの削除
12
34
56

行を削除するには、次のようにします。 

  table.deleteRow(index)
index が0なら1行目を、1なら2行目を削除します。 -1なら一番下の行を削除します。デフォルトは-1です。

セルを削除するには、次のようにします。 

  tr.deleteCell(index)
index が0なら1番目を、1なら2番目のセルを削除します。 -1なら一番右の削除しました。デフォルトは-1です。 
  tbl4.deleteRow();
  tbl4.rows[1].deleteCell(0);
Back