2011年05月05日

HTML DOM Table rows,cellsコレクション

スポンサード リンク

 javascript テーブルの行取得、セル取得
rowsコレクション、cellsコレクション

javascript テーブル
アクション コレクション/プロパティ オブジェクト
セルの値取得 innerHTMLプロパティ cellオブジェクト
行取得 rowsコレクション table,tbody,thead,tfootエレメント
セル取得 cellsコレクション th,trエレメント

rows.[index]:  cells.[index]:
[index]は'0'から数えます。表の1行,1列目は'0','0'になります。

さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
  <title>HTML DOM Table rows,cellsコレクション</title>
<style type="text/css">
<!--
.thead{
   background-color : #ffccff;
  }
.tfoot{
   background-color : #eeeeee;
  }
#getRES{
   font-size : 14px;
   color : blue;
  }
-->
</style>
<script type="text/javascript">
  function msgRow(){
   ans="";
    i=document.getElementById("row").selectedIndex;//セレクトメニューの値を取得
    j=document.getElementById("cell").selectedIndex;//'i'はrowsの'j'はcellsの値
      tbl = document.getElementById("Table1");
        ans="rows["+i+"]" +"&nbsp;: "+tbl.rows[i].innerHTML+"<br/>"+"rows["+i+"].cells["+j+"]"+"&nbsp;: "+tbl.rows[i].cells[j].innerHTML;
document.getElementById("getRES").innerHTML=ans;
       }
</script>

</head>
<body>
<!-- 表 -->
<table border="1" cellpadding="5" id="Table1">
 <caption>javascript テーブル</caption><!-- 表題 -->
<thead class="thead"><!-- 表ヘッダ -->
<tr>
 <th>アクション</th>
 <th>コレクション/プロパティ</th>
 <th>オブジェクト</th>
</tr>
</thead>
<tfoot class="tfoot"><!-- 表フッダ -->
<tr>
 <td>セルの値取得</td>
 <td>innerHTMLプロパティ</td>
<td>cellオブジェクト</td>
</tr>
</tfoot>
<tbody><!-- 表本体 -->
 <tr>
 <td>行取得</td>
 <td>rowsコレクション</td>
 <td>table,tbody,thead,tfootエレメント</td>
</tr>
<tr>
 <td>セル取得</td>
 <td>cellsコレクション</td>
 <td>trエレメント</td>
</tr>
</tbody>
</table>
<!-- テーブル終了 -->
<!-- セレクトメニュー -->
<form>
rows.[index]:
<select id="row">
 <option>0</option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>
&nbsp;cells.[index]:
<select id="cell">
 <option>0</option>
 <option>1</option>
 <option>2</option>
</select>
<!-- セレクトメニュー 終了-->
<input type="button" value="表示" onClick="msgRow()">
</form>
<code id="getRES"></code>
</body>
</html>

object.rows.[index]
 rowsコレクションは表 <table></table>要素の各行<tr></tr>のオブジェクトを収納しています。
コレクションを読み出すにはobject.rows.[index]構文を使います。
読み出すエレメントのindex値はゼロから始まります。
rowsコレクションは<tbody>の他 <thead>、<tfoot>をその範囲にしています。
tbl.rows[i] は表の'i'行目のオブジェクトを示しています。これをinnerHTMLで得ます。
例えば 'i'が2なら3行目の"セル取得  cellsコレクション  th,trエレメント"です。
object.cells.[index]
 cellsコレクションは表の各行<tr></tr>の中の
全てのセル<td></td>又は<th></th>のオブジェクトを格納しています。
コレクションを読み出すにはobject.cells.[index]構文を使います。
読み出すエレメントのindex値はゼロから始まります。
tbl.rows[0].cells[2]は1行目の3番目のセルです。
*参考 MSDN オンライン rows  cells

指定した要素の内容の取り出し,書き換え。innerHTML
さくらのレンタルサーバ スタンダード
テーブルの行、表示/非表示 javascript
HTML テーブル( 表 ) の作成。
テーブルの表題を固定してデータ部分だけをスクロールさせる。
テーブルの行の背景色を一行おきに変えます。
テーブルの行の文字色,背景色を変えてハイライトします。
サーバーカウボーイ



タグ:Rows TABLE HTML Cells
posted by javaScript at 22:12 | 大阪 | テーブル | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。