フォーラム@nifty | フォーラム・サークル | サイトマップ | ヘルプ |
掲示板 コラム お役立ち イベント リンク   | FHPGサイトマップ | お問い合わせ |
TOP > お役立ち > JavaScriptのおもちゃ箱 > データ検索サンプル(2)  

データ検索サンプル(2) (IE4.0以降)

原案:平井 公大 氏 (2001/02/25 登録)

 表の中のデータを選択ボックスで絞り込むサンプル2です。このサンプルでは表に書き込まれているデータを読み込んで、選択ボックスで選択されている項目と一致するものだけ表示するようにしています。表のセルの値が参照できるのは現在のところIE4.0以降のみのため、NNでは動作しません。

表示サンプル

根菜類 だいこん 200
果実類 みかん 100
魚介類 ハマグリ 200
根菜類 にんじん 100
果実類 りんご 100
魚介類 ハマチ 400
野菜類 はくさい 200
果実類 イチゴ 200
魚介類 タイ 400
野菜類 キャベツ 100
魚介類 マグロ 300
魚介類 アサリ 100
野菜類 レタス 300
果実類 バナナ 100
魚介類 イワシ 200
根菜類 サトイモ 100
魚介類 メザシ 100
根菜類 ごぼう 100
果実類 レモン 200
野菜類 ネギ 100
魚介類 サザエ 100

ソース記述内容

<!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>
個人情報保護ポリシー
Copyright© NIFTY 2006 All Rights Reserved.
Copyright© FHPG 2006 All Rights Reserved.