データ検索サンプル(2) (IE4.0以降)
原案:平井 公大 氏 (2001/02/25 登録)
表の中のデータを選択ボックスで絞り込むサンプル2です。このサンプルでは表に書き込まれているデータを読み込んで、選択ボックスで選択されている項目と一致するものだけ表示するようにしています。表のセルの値が参照できるのは現在のところIE4.0以降のみのため、NNでは動作しません。
表示サンプル
ソース記述内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>データ検索サンプル(2)</title>
<script type="text/javascript">
<!--
var r = new Object();
function init(n) {
r = document.getElementById('tbl1').rows;
if (n!=0) document.frm1.kind.selectedIndex = 0;
if (n!=1) document.frm1.name.selectedIndex = 0;
if (n!=2) document.frm1.pric.selectedIndex = 0;
for ( i=1; i < r.length; i++ ) {
document.getElementById('d'+i ).style.display = "block";
}
}
function seach( s, n ) {
init(n);
for ( i=1; i < r.length; i++ ) {
if ( r(i).cells(n).innerText != s ) {
document.getElementById('d'+i ).style.display = "none";
}
}
}
// -->
</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>