データ検索サンプル(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>