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

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

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

 表の中のデータを選択ボックスで絞り込むサンプル4です。このサンプルでは、IEのデータバインド機能を利用して、外部のCSVファイルからデータを取得しています。選択ボックスの項目も、サンプル(1)同様取得したデータから得ており、やはり複数の選択ボックスによる複合検索ができます。データバインド機能を利用していますので、IE4.0以降でないと動作しません。

表示サンプル

ソース記述内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>データ検索サンプル(4)</title>
<script type="text/javascript">
<!--
var r = new Object();

function rset() {
  document.frm1.kind.selectedIndex = 0;
  document.frm1.name.selectedIndex = 0;
  document.frm1.pric.selectedIndex = 0;
  for ( i=1; i < r.length; i++ ) r(i).style.display = "block";
}


function listchk( s, str ) {
  for ( k=0; k < s.length; k++ ) {
    if ( s[k].text == str ) return false;
  }
  return true;
}

function wrtttl( s, p ) {
  var n = 0;
  for ( i=1; i<r.length; i++ ) {
    if( listchk( s, r[i].cells[p].innerText ) ) {
      n++;
      s.length++;
      s[n].text  = r[i].cells[p].innerText;
      s[n].value = s[n].text;
    }
  }
}


function init() {
  r = document.getElementById('tbl1').rows;
  wrtttl( document.frm1.kind.options , 0 );
  wrtttl( document.frm1.name.options , 1 );
  wrtttl( document.frm1.pric.options , 2 );
  rset();
}

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 onLoad="init()">
<div style="text-align:center;"> 
  <object classid="clsid:333c7bc4-460f-11d0-bc04-0080c7055a83" id="csv" height="0" width="0">
    <param name="DataURL" value="sample.csv">
    <param name="UseHeader" value="true">
    <param name="TextQualifier" value=",">
  </object>
  <form name="frm1" style="width:300; text-align:right">
    <input name="button" type="button" onClick="rset()" value="リセット">
    <table datasrc="#csv" border="1" width="300" cellspacing="0" cellpadding="4" id="tbl1">
      <thead>
        <tr>
          <td width="100" align="center">
            <select name="kind" style="width:90;" onChange="seach(this[this.selectedIndex].value, 0 )">
              <option selected 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>
            </select>
          </td>
          <td width="100" align="center">
            <select name="pric" style="width:90;" onChange="seach(this[this.selectedIndex].value, 2 )">
              <option selected value="価  格">価  格</option>
            </select>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td width="100"><span datafld="種  別"></span></td>
          <td width="100"><span datafld="品  名"></span></td>
          <td width="100"><span datafld="価  格"></span></td>
        </tr>
      </tbody>
    </table>
  </form>
</div>
<script type="text/javascript">
<!--
init();
// -->
</script>
</body>
</html>
個人情報保護ポリシー
Copyright© NIFTY 2006 All Rights Reserved.
Copyright© FHPG 2006 All Rights Reserved.