2011年07月05日

テーブルの行、表示/非表示 javascript

スポンサード リンク

 サンプルテーブル
displayプロパティで行の表示 / 非表示を行います。



順位 ブラウザ シェア 推移
1 IE 61.58% 0.54pt ↓
2 Firefox 24.33% 0.20pt ↓
3 Chrome  5.61%  0.41pt ↑(セル結合)
4 Safari 4.45% 0.08pt ↓
5 Opera 2.35% 0.03pt ↓

2010年2月 ブラウザシェア 米Net Applications

サンプルソース

<html>
 <head>
  <title>テーブルの行 表示/非表示</title>
<style type="text/css">
<!--
#tbl th{
 color : black;
 background-color : #ccccff;
}
       /*上記のスタイルは動作に関係なし*/
-->
</style>

<script language="JavaScript">
<!-- //javascript123
 window.onload = putId;
    function putId(){
      // テーブルの行にID名を付ける
     var Tbe = document.getElementById("tbl");
      Tr = Tbe.getElementsByTagName("tr");
       for(i=0; i<Tr.length; i++){
        Tr[i].id='trID'+i;
            }
         }

function hideRow(){
  //セレクトメニューの option value値(ID名)の取得
 var List = document.getElementById("list");
  index_nub = List.selectedIndex;
   optVal=List.options[index_nub].value;
    var Row = document.getElementById(optVal);
     //行の表示、非表示
     Row.style.display=(Row.style.display == 'none')?"":"none";
   }
// -->
</script>
</head>
<body>
<select id="list">
  <option value="trID1">1行目</option>
  <option value="trID2">2行目</option>
  <option value="trID3">3行目</option>
  <option value="trID4">4行目</option>
</select>
<input onclick="hideRow()" type="button" value="表示 / 非表示">
<br />
<br />
<table id="tbl" border="1" cellpadding="4" cellspacing="0" width="360">
 <col span="4" width="90">
  <tbody>
<tr>
  <th>順位</th><th>ブラウザ</th><th>シェア</th><th>推移</th>
</tr>
<tr>
  <td>1</td><td>IE</td><td>61.58%</td><td>0.54pt↓</td>
</tr>
<tr>
  <td>2</td><td>Firefox</td><td>24.33%</td><td>0.20pt↓</td>
</tr>
<tr>
  <td>3</td><td colspan="3">Chrome 5.61% 0.41pt↑(セル結合)</td>
</tr>
<tr>
  <td>4</td><td>Safari</td><td>4.45%</td><td>0.08pt↓</td>
</tr>
<tr>
  <td>5</td><td>Orera</td><td>2.35%</td><td>0.03pt↓</td>
</tr>
</tbody>
</table>
</body>
</html>

テーブルの行にID名を付ける
 Tr = Tbe.getElementsByTagName("tr");
getElementsByTagName()メソッドを使って対象となる
テーブルの"tr"要素を取得します。
変数 Tr にはタグ名が "tr"である全要素が入っています。
Tr[i]で"tr"の数(Tr.length;)だけ順番にID名を付けていきます。
Tr[i].id='trID'+i;// 'i'は0から始まるので 'i'が1の場合
Tr[1]にはtrID1,Tr[2]にはtrID2と順にID名が付いていきます。
セレクトメニューの option value値の取得
値の取得はこちらを参考にしてください。HTML セレクトメニュー
<select id="list">
  <option value="trID1">1行目</option>
  <option value="trID2">2行目</option>
  <option value="trID3">3行目</option>
  <option value="trID4">4行目</option>
</select>
<input onclick="hideRow()" type="button" value="表示 / 非表示">
テーブルの行には動的にID名が付いているのでそれに対応する値を
option valueの値として書いていきます。上記サンプルでは
5行目は開閉できません。動作可能にするには4行目の
<option value="trID4">4行目</option>をコピーして下に貼り付け
trID5、5行目とすれば OKです。行が増えても簡単に対応できます。
行の表示 非表示
var Row = document.getElementById(optVal);
optValにはセレクトメニューで得た"trID*"が入っているので
そのID名の行を開閉します。
Row.style.display=(Row.style.display == 'none')?"":"none";
条件分岐で(Row.style.display == 'none')なら""
そうでなければ"none"を実行します。

  Row.style.display="none"; //閉じます
  Row.style.display="";     //開きます
display="block";と書くと
FireFox 3.5 では開閉はしますが、表のレイアウトが乱れます。
IE 7 は正常に動作します。

条件分岐
display プロパティ css スタイルシート
HTML セレクトメニュー
セレクトメニューの設置 値の取得 onchangeイベント
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!



posted by javaScript at 15:17 | 大阪 ☁ | テーブル | このブログの読者になる | 更新情報をチェックする
×

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