表フィルタ

No名称
1いか
2いぬ
3えび
4たか
5たこ
6とど
7ねこ
8はと
9ぶた

解説

このスクリプトは TRタグの display属性制御による一覧表のフィルタ処理の例です

多くの候補の絞り込みは、データベースより CGI を通して行うのが一般的ですが 候補数が多くない場合は CGI 経由にすると効率的ではない場合があります

このような場合にはスクリプトで表示制御する方が楽かもしれません

■JavaScript

function tblfilter(nm,key){
  if(!document.getElementsByTagName) return;
  var trs = document.getElementById(nm).rows;
  for(var i=0; i<trs.length; i++){
    var tr = trs[i];
    if(!tr.title || tr.title=='') continue;
    var found=0;
    if(key == '') found=1;
    else {
      var keys = tr.title.split(',');
      for(var j=0; j<keys.length; j++){
        if(keys[j] == key){ found=1; break; }
      }
    }
    tr.style.display = found?'':'none';
  }
}

このスクリプトは nm で示される id を持つ TABLE の TR要素のうち title属性を持つものを対象として key で指定されたキーワードを含む要素のみを 表示させるスクリプトです

このスクリプトは以下の構成の HTML を前提としています

■前提とする HTML要素
この文字はカスタマイズ項目です

<table id="ex1">
<tr>...</tr>
<tr title="key1"     >...</tr>
<tr title="key1,key2,...">...</tr>
    :
</table>

つまり、id属性をつけた TABLE 要素内の表示制御対象の行(TR)にキーワードを含む title属性を指定します
キーワードが複数ある場合はカンマ(,)で区切って指定します

また、表示を変更する場合は tblfilter関数の引数に TABLEの id属性名と表示対象のキーワードを指定します

■例

<select onchange="tblfilter('ex1',this.options[this.selectedIndex].value);">
<option value="">すべて</option>
<option value="海">海の動物</option>
<option value="陸">陸の動物</option>
<option value="鳴く">鳴く動物</option>
</select>

注意とヒント

●このスクリプトは IE5.5, IE6, Mozilla1.4, Opera7.03( 以上 Windows ), Safari1.0, IE5.2( 以上 Mac 10.2 ), Konqueror3.1, Opera7.20 Beta7( 以上 RedHat 9 ) で確認しています
これより古いバージョンのブラウザでは正常に動作しないかもしれません

●このスクリプトは TRタグの title属性に、指定するキーワードが含まれている必要があります
つまり、段階的に表示させるような表示制御をする場合には面倒かもしれません
このような場合はキーワードに表示可能なレベルを指定するようにして、 判定は一致ではなく指定レベル以上かを判定した方が良いでしょう

No名称
11.1
21.2
31.3
42.1
52.2
62.3
73.1
83.2
93.3

●TRタグの title属性をこのような目的で使用するには抵抗ある人がいるかもしれません
その他の手法としては display:none な td を使用したり TR に対応する独立な配列を生成したり、 といったことも考えられると思います f(^^;