会員の名前を入力したら、ＵＲＬやメールアドレスが検索できる本格的なデータ−ベースソフトに近づくきましたが、
並べ替えをすると、階数がそろわなくなってしまう。
これではまだデータベースとしては不完全です。
一つの置場にすべてのデータを結合して保存しておけば、並べ替えも一緒にできる！、そして、そのデータ使うときに分割して復元できれば解決できそうです。
1、データの結合
個々の立体置場の壁を取り払い大部屋にして、データを連結します。
このときデータの境目に仕切板を挟みます。仕切板に使う文字はデータの中に使われない文字を当てます。
（ただし￥＠＆は使わない方が無難）
例えば「 ，」を使って次のように連結します。
| 階数＼置場 | 会員，ﾎｰﾑﾍﾟｰｼﾞ，ＵＲＬ，ﾒｰﾙｱﾄﾞﾚｽ（kaiin[ ]） |
|---|
| ０（n=0） | 宮本幸雄，還暦ＱＰＯＮ，http://www2a.biglobe.ne.jp/~qpon/，qpon@testmail.com |
| １（n++） | やまと，多趣味人間，http://homepage1.nifty.com/PGA01511/，morikazu.kojo@testmail.com |
| ２（n++） | 五十嵐冴子，タッチおばさん，http://www.tesio.net/~sae/，sae@testmail.com |
| ３（n++） | おかりん，合切袋，http://users.goo.ne.jp/gassaibukuro/，gassaibukuro@testmail.com |
具体的にＪａｖａＳｃｒｉｐｔでは、次のように書きます。
<![CDATA[
kaiin=new Array();
n=0;kaiin[n]='宮本幸雄,還暦ＱＰＯＮ,http://www2a.biglobe.ne.jp/~qpon/,qpon@testmail.com';
n++;kaiin[n]='やまと,多趣味人間,http://homepage1.nifty.com/PGA01511/,morikazu.kojo@testmail.com';
n++;kaiin[n]='五十嵐冴子,タッチおばさん,http://www.tesio.net/~sae/,sae@testmail.com';
n++;kaiin[n]='おかりん,合切袋,http://users.goo.ne.jp/gassaibukuro/,gassaibukuro@testmail.com';
]]>
実際にＪＳファイルを上記の方式で
http://www.ne.jp/asahi/qpob/b/java/nyumon/kaiin_1.js
に作っておきました。
このファイルを結合して、これから色んな活用をしてみます。
２、データの分割
分割データを収容する立体置場名＝連結データのある置場名．ｓｐｌｉｔ（”仕切り文字”）；
と書くと仕切り文字毎に立体置場の各階に分割して納められます。
kaiin[0]='宮本幸雄,還暦ＱＰＯＮ,qpon@testmail.com,http://www2a.biglobe.ne.jp/~qpon/';
を例にしてみますと
dt=kaiin[0].split(",");
を実行した場合
dt[0]には"宮本幸雄"
dt[1]には"還暦ＱＰＯＮ"
dt[2]には"qpon@testmail.com"
dt[3]には"http://www2a.biglobe.ne.jp/~qpon/"
が入ります。
３、並べ替え
それではＪＳファイルのデータを分割しながら会員リストを作って見ましょう。
会員リスト
次に「あいうえお順」に並べ変たうえでデータを分割しなが作って見ましょう。
あいうえお順リスト
このソースは
-
<![CDATA[
<html>
<head>
<title>javascript入門no151</title>
<script language="javascript" src="kaiin_2.js"></script>
</head>
<body>
<center>
ＱＬＩＮＫ会員一覧表<br>（あいうえお順）<br>
<table border=1>
<tr><th>no</th><th>会員</th><th>ホームページ</th><th>ＵＲＬ</th><th>メールアドレス</th></tr>
]]>
<![CDATA[
<script language="javascript">
<!--
kaiin.sort(); //あいうえお順に並び替え（この行がないと登録順）
for(i=0;i<=n;i++){
dt=kaiin[i].split(","); // ","で分割しｄｔという立体置場に格納
document.write("<tr><td>",i+1,"</td><td>",dt[0],"</td><td>",dt[1],"</td>");
document.write("<td>",dt[2],"</td><td>",dt[3],"</td></tr>\n"); //ＨＴＭＬに書出し
}
//-->
</script>
]]>
<![CDATA[
</table>
</center>
</body>
</html>
]]>
|
３、検索
合体してあると検索も全データを対象にできる。
名前だけではなく、ＵＲＬでもホームページタイトルでも、とにかく全データの中に一致する文字が含まれていれば教えてくれる。
次の検索キーワードに入力して体験してみてください。
ソースは以下の通りです。
-
<![CDATA[
<html>
<head>
<title>javascript入門no15</title>
<script language="javascript" src="http://qpon-toyota.com/java/nyumon/kaiin_2.js">
</script>
<script language="javascript">
<!--
//あいうえお順
kaiin.sort();
//検索
dm_dt="";kaisu=0;
function kensaku(){
kaisu=-1;
se_dt=document.kaiin_form.input_name.value;
for(i=0;i<=n;i++){
iti=kaiin[i].indexOf(se_dt,0);
if(iti != -1){
kaisu=i;
break;
}
}
if(kaisu>=0){
dt=kaiin[kaisu].split(",")
document.kaiin_form.out_name.value=dt[0];
document.kaiin_form.out_title.value=dt[1];
document.kaiin_form.out_url.value=dt[2];
document.kaiin_form.out_ml.value=dt[3];
}else{
document.kaiin_form.out_title.value="";
document.kaiin_form.out_name.value="該当者なし";
document.kaiin_form.out_url.value="";
document.kaiin_form.out_ml.value="";
}
}
</head>
<body>
<form name="kaiin_form">
<table>
<tr><td>検 索 キ ー ワー ド<br>.</td><td><input type=text name="input_name" value="" size=16>
<input type=button value="検 索" onClick="kensaku()"><hr></td></tr>
<tr><td>会 員 名</td><td>
<input type=text name="out_name" value="" size=16>さん</td></tr>
<tr><td>ホームページタイトル</td><td><input type=text name="out_title" value="" size=40>
</td></tr>
<tr><td>ホームページアドレス</td><td><input type="text" name="out_url" value="" size=60>
</td></tr>
<tr><td>電 子メールアドレス</td><td><input type="text" name="out_ml" value="" size=60>
</td></tr>
</table>
</form>
<hr>
<hr>
</td></tr></table>
</center>
</body>
</html>
]]>
|
|