ページにtableを表示する場合、大きくなり過ぎると、スクロールしなければならず、非常に見にくくなります。あまり、必要でない部分を非表示にすれば、扱いやすいページになると考えられ、web上色々捜してみた結果、これが一番良いと思われます。ただし、セルの結合をしている表など、複雑なものに関しては、当然のことながら、うまく動作しません。
[trタグにidをセットする方法]
注意点
1行のみ表示/非表示する場合は便利。
tableの表記方法
非表示にしたい<tr>タグにidをつける<table><tr id="b1">/*------->ここが消える*/<td>1</td></tr><tr><td>2</td></tr></table>
[tbodyにidをセットする方法]
注意点
tableの表記方法領域をまとめて指定できるので、1つの関数でコントロールできて便利。<tbody>はいくつあっても良いので、複数書き込み、それぞれにidをつけてコントロールできる。<thead>、<tfoot>はあってもなくてもよい。セルが結合してあっても、まとめて<tbody>でくくれれる領域なら、使用可能。
非表示にしたい部分を<tbody>タグで囲み、idをつける<table><tr><td>1</td></tr><tbody id="b1">/*------->ここが消える*/<tr><td>2</td></tr></tbody></table>
[使用方法]
trでも、tbodyでも、呼び出し方法は一緒。
ボタンに機能を設定する場合
<button onclick="document.getElementById('b1').style.display = 'none'";>ここに表示する文字</button> /*非表示*/<button onclick="document.getElementById('b1').style.display = '';">ここに表示する文字</button> /*表示*/
関数として、JavaScriptで記載する場合
function hide(a){document.getElementById(a).style.display = 'none'; /*非表示*/}function show(a){document.getElementById(a).style.display = ''; /*表示*/}
HTML側の書き方
spanでなくても、<a>などでもかまわない。
<span onclick="hide('b1')";>ここに表示する文字</span><span onclick="show('b1')";>ここに表示する文字</span>
注意点
※document.getElementByIdを使用するが、この通り(大文字小文字)に入力しないとエラーになる。※onclickに複数の関数を指定する場合は、間にセミコロン(;)を入れる。これにより、複数のIDを同時に操作できる。※document.getElementsByClassName('b1')という方法もあるらしいが、IE8以下では使用できない。他のブラウザやIE9～は可能らしい?※onclickの他に、onload,onmoseover,onmouseoutなどが使用できる。
その他使用例
HTMLページ読み込み時、onloadを<body>タグ内に記載する。<body onload = "document.getElementById('b1').style.display = 'none';">
0 件のコメント:
コメントを投稿