テーブルの行を動的に表示・非表示

動機

PHPでやるよりもJavaScriptのほうがよさげだったから、がんばって実装してみた。思ったよりも時間をとられた。

方法

方法は簡単で使う関数は

• getElementById('ID_NAME')

だけ。ポイントはCSSでclassにvisibleとhiddenとかをつくっておいて変更すること。たとえばこんな感じ。

【HEAD部】
<style "text/css">
.visible { display: table-row; }
.hidden { display: none; }
</style>
<script language="JavaScript">
function showTR(n){ // n:行番号
　if(i <= n) {
　　document.getElementById('row_num_'+i+'_index').className = 'visible';
　　document.getElementById('row_num_'+i+'_content').className = 'visible';
  } else {
　　document.getElementById('row_num_'+i+'_index').className = 'hidden';
　　document.getElementById('row_num_'+i+'_content').className = 'hidden';
　}
}
</script>

【BODY部】
<select onchange="showTR(this.selectedIndex + 1)">
<?php
for ($i = 1; $i <= $MAX_NUMBER; $i++) {
　print("＜option value=\"".$i."\"＞".$i."＜/option＞");
}
?>
</select>
<table>
<tr id="row_num_1_index"><td>タイトル</td><td>タイトル</td></tr>
<tr id="row_num_1_content"><td>内容</td><td>内容</td></tr>
<tr id="row_num_2_index"><td>タイトル</td><td>タイトル</td></tr>
<tr id="row_num_2_content"><td>内容</td><td>内容</td></tr>
<tr id="row_num_3_index"><td>タイトル</td><td>タイトル</td></tr>
<tr id="row_num_3_content"><td>内容</td><td>内容</td></tr>
</table>

気をつけなければいけないのはidはあるタグに対して１つのHTMLファイルの中で一意に決まるものでなければいけないので、同じidが複数ある場合うまく機能しないことがあること。

まとめ

JavaScriptはおもしろい。