YAMAGUCHI::weblog

土足で窓から失礼いたします。今日からあなたの息子になります。 当年とって92歳、下町の発明王、エジソンです。

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

動機

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はあるタグに対して1つのHTMLファイルの中で一意に決まるものでなければいけないので、同じidが複数ある場合うまく機能しないことがあること。

まとめ

JavaScriptはおもしろい。