データ検索サンプル(3) (IE4.0以降)
原案:平井 公大 氏 (2001/02/25 登録)
表の中のデータを選択ボックスで絞り込むサンプル3です。このサンプルは、サンプル(2)の動作に加え、複数の選択ボックスで現在選択されている項目による複合検索ができるようになっています。やはり表のセルの値を参照していますので、IE4.0以降でないと動作しません。
表示サンプル
ソース記述内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>データ検索サンプル(3)</title>
<script type="text/javascript">
<!--
var r = new Object();
function init() {
r = document.getElementById('tbl1').rows;
for ( i=1; i < r.length; i++ ) r(i).style.display = "block";
}
function seach( s, n ) {
var flg;
var h = r(0).cells.length
var k = new Array(h)
var key = new Array(h)
k[0] = document.frm1.kind.selectedIndex;
k[1] = document.frm1.name.selectedIndex;
k[2] = document.frm1.pric.selectedIndex;
key[0] = document.frm1.kind.options[k[0]].value;
key[1] = document.frm1.name.options[k[1]].value;
key[2] = document.frm1.pric.options[k[2]].value;
for ( i=1; i < r.length; i++ ) {
for ( j=0; j<h; j++ ) {
if ( r(i).cells(j).innerText != key[j] && k[j] ) {
flg = "none";
break;
} else {
flg = "block";
}
}
r(i).style.display = flg;
}
}
// -->
</script>
</head>
</body>
<div style="text-align:center;">
<form name="frm1">
<table border="1" width="300" cellspacing="0" cellpadding="4" id="tbl1">
<tr>
<td width="100" align="center">
<select name="kind" style="width:90;" onChange="seach(this[this.selectedIndex].value, 0 )">
<option selected value="種 別">種 別</option>
<option value="根菜類">根菜類</option>
<option value="果実類">果実類</option>
<option value="野菜類">野菜類</option>
<option value="魚介類">魚介類</option>
</select>
</td>
<td width="100" align="center">
<select name="name" style="width:90;" onChange="seach(this[this.selectedIndex].value, 1 )">
<option selected value="品 名">品 名</option>
<option value="だいこん">だいこん</option>
<option value="みかん" >みかん</option>
<option value="ハマグリ">ハマグリ</option>
<option value="にんじん">にんじん</option>
<option value="りんご" >りんご</option>
<option value="ハマチ" >ハマチ</option>
<option value="はくさい">はくさい</option>
<option value="イチゴ" >イチゴ</option>
<option value="タイ" >タイ</option>
<option value="キャベツ">キャベツ</option>
<option value="マグロ" >マグロ</option>
<option value="アサリ" >アサリ</option>
<option value="レタス" >レタス</option>
<option value="バナナ" >バナナ</option>
<option value="イワシ" >イワシ</option>
<option value="サトイモ">サトイモ</option>
<option value="メザシ" >メザシ</option>
<option value="ごぼう" >ごぼう</option>
<option value="レモン" >レモン</option>
<option value="ネギ" >ネギ</option>
<option value="サザエ" >サザエ</option>
</select>
</td>
<td width="100" align="center">
<select name="pric" style="width:90;" onChange="seach(this[this.selectedIndex].value, 2 )">
<option selected value="価 格">価 格</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
</td>
</tr>
<tr id="d1" style="positon:absolute">
<td width="100">根菜類</td>
<td width="100">だいこん</td>
<td width="100">200</td>
</tr>
<tr id="d2" style="positon:absolute">
<td width="100">果実類</td>
<td width="100">みかん</td>
<td width="100">100</td>
</tr>
<tr id="d3" style="positon:absolute">
<td width="100">魚介類</td>
<td width="100">ハマグリ</td>
<td width="100">200</td>
</tr>
<tr id="d4" style="positon:absolute">
<td width="100">根菜類</td>
<td width="100">にんじん</td>
<td width="100">100</td>
</tr>
<tr id="d5" style="positon:absolute">
<td width="100">果実類</td>
<td width="100">りんご</td>
<td width="100">100</td>
</tr>
<tr id="d6" style="positon:absolute">
<td width="100">魚介類</td>
<td width="100">ハマチ</td>
<td width="100">400</td>
</tr>
<tr id="d7" style="positon:absolute">
<td width="100">野菜類</td>
<td width="100">はくさい</td>
<td width="100">200</td>
</tr>
<tr id="d8" style="positon:absolute">
<td width="100">果実類</td>
<td width="100">イチゴ</td>
<td width="100">200</td>
</tr>
<tr id="d9" style="positon:absolute">
<td width="100">魚介類</td>
<td width="100">タイ</td>
<td width="100">400</td>
</tr>
<tr id="d10" style="positon:absolute">
<td width="100">野菜類</td>
<td width="100">キャベツ</td>
<td width="100">100</td>
</tr>
<tr id="d11" style="positon:absolute">
<td width="100">魚介類</td>
<td width="100">マグロ</td>
<td width="100">300</td>
</tr>
<tr id="d12" style="positon:absolute">
<td width="100">魚介類</td>
<td width="100">アサリ</td>
<td width="100">100</td>
</tr>
<tr id="d13" style="positon:absolute">
<td width="100">野菜類</td>
<td width="100">レタス</td>
<td width="100">300</td>
</tr>
<tr id="d14" style="positon:absolute">
<td width="100">果実類</td>
<td width="100">バナナ</td>
<td width="100">100</td>
</tr>
<tr id="d15" style="positon:absolute">
<td width="100">魚介類</td>
<td width="100">イワシ</td>
<td width="100">200</td>
</tr>
<tr id="d16" style="positon:absolute">
<td width="100">根菜類</td>
<td width="100">サトイモ</td>
<td width="100">100</td>
</tr>
<tr id="d17" style="positon:absolute">
<td width="100">魚介類</td>
<td width="100">メザシ</td>
<td width="100">100</td>
</tr>
<tr id="d18" style="positon:absolute">
<td width="100">根菜類</td>
<td width="100">ごぼう</td>
<td width="100">100</td>
</tr>
<tr id="d19" style="positon:absolute">
<td width="100">果実類</td>
<td width="100">レモン</td>
<td width="100">200</td>
</tr>
<tr id="d20" style="positon:absolute">
<td width="100">野菜類</td>
<td width="100">ネギ</td>
<td width="100">100</td>
</tr>
<tr id="d21" style="positon:absolute">
<td width="100">魚介類</td>
<td width="100">サザエ</td>
<td width="100">100</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
<!--
init();
// -->
</script>
</body>
</html>