WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)

■ JavaScript - サンプル集(257種類) - フォーム
   - データベースVer6 (検索機能付きVer1)

データベーススクリプトVer6です。 これは簡易検索機能タイプのデータベースです。

何でも良いので、データに含まれている文字を入力すると、 その文字に関するデータが出力されます。

データ出力する項目を選択する事も出来ます。
例えば入力したキーワードに一致する2つの項目だけを結果として表示する、 と言う形です。
デフォルトでは全ての項目にチェックが入っています。

キーワード検索の場合、半角スペースで区切る事で、複数検索も可能です。
ただし複数検索の場合、or検索のみで、and検索は不可能です。

現在入ってるサンプルデータはギリシア神話、オリンポス神族に関するものです。 ちなみに諸説あるものも、あえて一つの説しかあげてません。


ゼウス・主神・ヘラ・レア・クロノス
ヘラ・女神の女王・ゼウス・レア・クロノス
デメテル・農業、大地・ゼウス・レア・クロノス
ポセイドン・海神・レア・クロノス
プルートーン・冥界神・レア・クロノス
ヘスティア・かまどの神・レア・クロノス
ヘーパイストス・鍛冶・アプロディーテ・ヘラ・ゼウス
アレス・戦い・レア・ゼウス
アポロン・太陽、音楽、医術、予言・レト・ゼウス
アルテミス・月、狩猟、出産・レト・ゼウス
アテナ・戦い、知識、技芸・メティス・ゼウス
アプロディーテ・愛、美・ディオーネー・ゼウス
ヘルメス・伝令、商売、競技、熟練、機敏・マイア・ゼウス

全データに「第三世代・オリンポス」のデータも入ってます。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。)
ソースを見る
解説を見る
補足解説を見る





[ ソース ]

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	my_data=new Array();
	ths=new Array();
	td_align=new Array();

	//********** データ *********
	//項目名
	ths[0]="世代名";
	ths[1]="神族名"
	ths[2]="名 前";
	ths[3]="説 明";
	ths[4]="伴 侶";
	ths[5]="母 親";
	ths[6]="父 親";

	//データの総数
	//データの増減を行った際は、必ず書き替えて下さい。
	data_num=13;

	for(i=0; i<data_num; i++){ my_data[i]=new Array(); }

	//データ1
	my_data[0][0]="第三世代";
	my_data[0][1]="オリンポス";
	my_data[0][2]="ゼウス";
	my_data[0][3]="主神";
	my_data[0][4]="ヘラ";
	my_data[0][5]="レア";
	my_data[0][6]="クロノス";

	//データ2
	my_data[1][0]="第三世代";
	my_data[1][1]="オリンポス";
	my_data[1][2]="ヘラ";
	my_data[1][3]="女神の女王";
	my_data[1][4]="ゼウス";
	my_data[1][5]="レア";
	my_data[1][6]="クロノス";

	//データ3
	my_data[2][0]="第三世代";
	my_data[2][1]="オリンポス";
	my_data[2][2]="デメテル";
	my_data[2][3]="農業、大地";
	my_data[2][4]="ゼウス";
	my_data[2][5]="レア";
	my_data[2][6]="クロノス";

	//データ4
	my_data[3][0]="第三世代";
	my_data[3][1]="オリンポス";
	my_data[3][2]="ポセイドン";
	my_data[3][3]="海神";
	my_data[3][4]="<br>";
	my_data[3][5]="レア";
	my_data[3][6]="クロノス";

	//データ5
	my_data[4][0]="第三世代";
	my_data[4][1]="オリンポス";
	my_data[4][2]="プルートーン";
	my_data[4][3]="冥界神";
	my_data[4][4]="<br>";
	my_data[4][5]="レア";
	my_data[4][6]="クロノス";

	//データ6
	my_data[5][0]="第三世代";
	my_data[5][1]="オリンポス";
	my_data[5][2]="ヘスティア";
	my_data[5][3]="かまどの神";
	my_data[5][4]="<br>";
	my_data[5][5]="レア";
	my_data[5][6]="クロノス";

	//データ7
	my_data[6][0]="第三世代";
	my_data[6][1]="オリンポス";
	my_data[6][2]="ヘーパイストス";
	my_data[6][3]="鍛冶";
	my_data[6][4]="アフロディーテ";
	my_data[6][5]="ヘラ";
	my_data[6][6]="ゼウス";

	//データ8
	my_data[7][0]="第三世代";
	my_data[7][1]="オリンポス";
	my_data[7][2]="アレス";
	my_data[7][3]="戦い";
	my_data[7][4]="<br>";
	my_data[7][5]="レア";
	my_data[7][6]="ゼウス";

	//データ9
	my_data[8][0]="第三世代";
	my_data[8][1]="オリンポス";
	my_data[8][2]="アポロン";
	my_data[8][3]="太陽、音楽、医術、予言";
	my_data[8][4]="<br>";
	my_data[8][5]="レト";
	my_data[8][6]="ゼウス";

	//データ10
	my_data[9][0]="第三世代";
	my_data[9][1]="オリンポス";
	my_data[9][2]="アルテミス";
	my_data[9][3]="月、狩猟、出産";
	my_data[9][4]="<br>";
	my_data[9][5]="レト";
	my_data[9][6]="ゼウス";

	//データ11
	my_data[10][0]="第三世代";
	my_data[10][1]="オリンポス";
	my_data[10][2]="アテナ";
	my_data[10][3]="戦い、知識、技芸";
	my_data[10][4]="<br>";
	my_data[10][5]="メティス";
	my_data[10][6]="ゼウス";

	//データ12
	my_data[11][0]="第三世代";
	my_data[11][1]="オリンポス";
	my_data[11][2]="アプロディーテ";
	my_data[11][3]="愛、美";
	my_data[11][4]="<br>";
	my_data[11][5]="ディオーネー";
	my_data[11][6]="ゼウス";

	//データ13
	my_data[12][0]="第三世代";
	my_data[12][1]="オリンポス";
	my_data[12][2]="ヘルメス";
	my_data[12][3]="伝令、商売、競技、熟練、機敏";
	my_data[12][4]="<br>";
	my_data[12][5]="マイア";
	my_data[12][6]="ゼウス";


	//********** 配置指定 *********
	//center , right , leftのいずれかを指定

	//結果画面全体の配置
	table_align="left";

	//項目の配置
	th_align="center";

	//データの配置
	//上から順に項目1の配置、項目2の配置…
	td_align[0]="left";
	td_align[1]="left";
	td_align[2]="left";
	td_align[3]="left";
	td_align[4]="left";
	td_align[5]="left";
	td_align[6]="left";


	//********** スタイル *********
	//ウィンドウのタイトルを指定
	win_title='結果画面';

	//ウィンドウの背景色を指定
	bg_color='#ffffff';

	//ウィンドウの文字色を指定
	text_color='#000000';

	//ウィンドウのリンク色を指定
	link_color='#ff0000';

	//ウィンドウのvlink色を指定
	vlink_color='#00ff00';

	//ウィンドウのalink色を指定
	alink_color='#0000ff';

	//テーブルの横幅を指定
	table_w='400';

	//テーブルの背景色を指定
	table_bgcolor='#ffffff';

	//テーブルのthの背景色を指定
	th_bgcolor='#ffd9b7';

	//テーブルのthの文字色を指定
	th_textcolor='#622f00';

	//テーブルのthの文字サイズを指定
	th_textsize='3';

	//テーブルのtdの背景色を指定
	td_bgcolor='#fff795';

	//テーブルのtdの文字色を指定
	td_textcolor='#645c00';

	//テーブルのtdの文字サイズを指定
	td_textsize='3';

	//ウィンドウの戻るボタン名を指定
	//画像ボタンを使用したい場合は、imgタグを記入
	button='戻る';


	function syuukei()
		{
		var mojis='';
		kensaku=new Array();
		kensaku=document.form1.text1.value.split(" ");
		my_form=new Array();
		for(i=1; i<ths.length+1; i++)my_form[i-1]=document.form1.elements[i].checked;

		mojis='<html>\n<head>\n<title>'+win_title+'<\/title>\n<\/head>\n';
		mojis+='<body text="'+text_color+'" bgcolor="'+bg_color+'" link="'+link_color+'" vlink="'+vlink_color+'" alink="'+alink_color+'">\n';
		mojis+='「'+kensaku+'」の検索結果<br>\n';
		mojis+='<div align="'+table_align+'">';
		mojis+='<table width="'+table_w+'" border="1" bgcolor="'+table_bgcolor+'">\n';

		mojis+='<tr align="'+th_align+'">\n';
		for(i=0; i<ths.length; i++)
			if(my_form[i] == true)
				mojis+='<th bgcolor="'+th_bgcolor+'"><font size="'+th_textsize+'" color="'+th_textcolor+'">'+ths[i]+'<\/font><\/th>\n';
		mojis+='<\/tr>\n';

		for(i=0; i<my_data.length; i++)
			{
			for(j=0;j<ths.length;j++)
				{
				for(l=0; l<kensaku.length; l++)
					{
					if(my_data[i][j].indexOf(kensaku[l]) != -1)
						{
						mojis+='<tr>\n';
						for(k=0; k<ths.length; k++)
							{
							if(my_form[k] == true)
								mojis+='<td bgcolor="'+td_bgcolor+'" align="'+td_align[k]+'"><font size="'+td_textsize+'" color="'+td_textcolor+'">'+my_data[i][k]+'<\/font><\/td>\n';
							}
						}
					}
				}
			mojis+='<\/tr>\n';
			}

		mojis+='<\/table>\n<br clear="all"><a href="javascript:history.back();">'+button+'<\/a><\/font><\/div><\/body><\/html>';

		delete kensaku;
		delete my_form;
		with(document)
			{
			open();
			write(mojis);
			close();
			}
		}

//-->
</script>

</head>

<body>

<form name="form1" onSubmit="syuukei();">
<input type="text" size="25" name="text1"><br>
<input type="checkbox" name="dai" checked>世代名
<input type="checkbox" name="dainame" checked>神族名
<input type="checkbox" name="name" checked>名前<br>
<input type="checkbox" name="syoutyou" checked>説明
<input type="checkbox" name="hanryo" checked>伴侶
<input type="checkbox" name="haha" checked>母親
<input type="checkbox" name="titi" checked>父親<br>
<input type="button" value="Click!" onClick="syuukei();">
</form>

 ・
 ・
 ・

</body></html>


[ 解説 ]

まず最初にデータの形式から説明していきます。

//データ1
my_data[0][0]="第三世代";
my_data[0][1]="オリンポス";
my_data[0][2]="ゼウス";
my_data[0][3]="主神";
my_data[0][4]="ヘラ";
my_data[0][5]="レア";
my_data[0][6]="クロノス";

で、一つのデータです。
データを増やす場合、減らす場合、上の6行を丸々増やすor減らす事になります。
サンプルにデータを一つ増やすとすると、

変 更 前変 更 後
//データ1
my_data[0][0]="第三世代";
my_data[0][1]="オリンポス";
my_data[0][2]="ゼウス";
my_data[0][3]="主神";
my_data[0][4]="ヘラ";
my_data[0][5]="レア";
my_data[0][6]="クロノス";

//データ2
my_data[1][0]="第三世代";
my_data[1][1]="オリンポス";
my_data[1][2]="ヘラ";
my_data[1][3]="女神の女王";
my_data[1][4]="ゼウス";
my_data[1][5]="レア";
my_data[1][6]="クロノス";

……

//データ12
my_data[11][0]="第三世代";
my_data[11][1]="オリンポス";
my_data[11][2]="アプロディーテ";
my_data[11][3]="愛、美";
my_data[11][4]="<br>";
my_data[11][5]="ディオーネー";
my_data[11][6]="ゼウス";

//データ13
my_data[12][0]="第三世代";
my_data[12][1]="オリンポス";
my_data[12][2]="ヘルメス";
my_data[12][3]="伝令、商売、競技、熟練、機敏";
my_data[12][4]="<br>";
my_data[12][5]="マイア";
my_data[12][6]="ゼウス";
//データ1
my_data[0][0]="第三世代";
my_data[0][1]="オリンポス";
my_data[0][2]="ゼウス";
my_data[0][3]="主神";
my_data[0][4]="ヘラ";
my_data[0][5]="レア";
my_data[0][6]="クロノス";

//データ2
my_data[1][0]="第三世代";
my_data[1][1]="オリンポス";
my_data[1][2]="ヘラ";
my_data[1][3]="女神の女王";
my_data[1][4]="ゼウス";
my_data[1][5]="レア";
my_data[1][6]="クロノス";

……

//データ12
my_data[11][0]="第三世代";
my_data[11][1]="オリンポス";
my_data[11][2]="アプロディーテ";
my_data[11][3]="愛、美";
my_data[11][4]="<br>";
my_data[11][5]="ディオーネー";
my_data[11][6]="ゼウス";

//データ13
my_data[12][0]="第三世代";
my_data[12][1]="オリンポス";
my_data[12][2]="ヘルメス";
my_data[12][3]="伝令、商売、競技、熟練、機敏";
my_data[12][4]="<br>";
my_data[12][5]="マイア";
my_data[12][6]="ゼウス";
//データ14
my_data[13][0]="第三世代";
my_data[13][1]="オリンポス";
my_data[13][2]="ヘルメス";
my_data[13][3]="伝令、商売、競技、熟練、機敏";
my_data[13][4]="<br>";
my_data[13][5]="マイア";
my_data[13][6]="ゼウス";

このように、書式が同じで、赤字の数字部分が一つずつ大きくなっていきます。

データの内容がない部分には、「<br>」を入れて下さい。
上では2行目と、6行目に入ってますね。
入れなくても別に問題はないのですが、結果を綺麗に見せるため、 入れた方が良いでしょう。


データを削除する際は、下から順に1つのデータを丸ごと削除します。
例えばサンプルのデータからデータを1つ削除するとしますと、以下のようになります。

変 更 前変 更 後
//データ1
my_data[0][0]="第三世代";
my_data[0][1]="オリンポス";
my_data[0][2]="ゼウス";
my_data[0][3]="主神";
my_data[0][4]="ヘラ";
my_data[0][5]="レア";
my_data[0][6]="クロノス";

//データ2
my_data[1][0]="第三世代";
my_data[1][1]="オリンポス";
my_data[1][2]="ヘラ";
my_data[1][3]="女神の女王";
my_data[1][4]="ゼウス";
my_data[1][5]="レア";
my_data[1][6]="クロノス";

……

//データ12
my_data[11][0]="第三世代";
my_data[11][1]="オリンポス";
my_data[11][2]="アプロディーテ";
my_data[11][3]="愛、美";
my_data[11][4]="<br>";
my_data[11][5]="ディオーネー";
my_data[11][6]="ゼウス";

//データ13
my_data[12][0]="第三世代";
my_data[12][1]="オリンポス";
my_data[12][2]="ヘルメス";
my_data[12][3]="伝令、商売、競技、熟練、機敏";
my_data[12][4]="<br>";
my_data[12][5]="マイア";
my_data[12][6]="ゼウス";
//データ1
my_data[0][0]="第三世代";
my_data[0][1]="オリンポス";
my_data[0][2]="ゼウス";
my_data[0][3]="主神";
my_data[0][4]="ヘラ";
my_data[0][5]="レア";
my_data[0][6]="クロノス";

//データ2
my_data[1][0]="第三世代";
my_data[1][1]="オリンポス";
my_data[1][2]="ヘラ";
my_data[1][3]="女神の女王";
my_data[1][4]="ゼウス";
my_data[1][5]="レア";
my_data[1][6]="クロノス";

……

//データ12
my_data[11][0]="第三世代";
my_data[11][1]="オリンポス";
my_data[11][2]="アプロディーテ";
my_data[11][3]="愛、美";
my_data[11][4]="<br>";
my_data[11][5]="ディオーネー";
my_data[11][6]="ゼウス";




項目の名称(名前、住所など)を変更したい場合は、

 ths[0]="世代名";
 ths[1]="神族名";
 ths[2]="名 前";
 ths[3]="説 明";
 ths[4]="伴 侶";
 ths[5]="母 親";
 ths[6]="父 親";

の部分を変更します。お好きな項目の名称を入れて下さい。

また、スクリプトの下の方にある

 <input type="checkbox" name="dai">世代名
 <input type="checkbox" name="dainame">神族名
 <input type="checkbox" name="name">名前<br>
 <input type="checkbox" name="syoutyou">説明
 <input type="checkbox" name="hanryo">伴侶
 <input type="checkbox" name="haha">母親
 <input type="checkbox" name="titi">父親<br>

部分も、同じの名称に変更して下さい。

項目自体を減ら場合は、不要な項目を削除します。
その際、スクリプト内の項目名称部分、HTML部分のインプットタグ、 データ部分の、3つの部分で不要な項目を削除して下さい。

例えば、サンプルで「父親」の項目を削除する場合。
まず各データの「父親」の項目に当たるデータを削除します。

変 更 前変 更 後
//データ1
my_data[0][0]="第三世代";
my_data[0][1]="オリンポス";
my_data[0][2]="ゼウス";
my_data[0][3]="主神";
my_data[0][4]="ヘラ";
my_data[0][5]="レア";
my_data[0][6]="クロノス";

//データ2
my_data[1][0]="第三世代";
my_data[1][1]="オリンポス";
my_data[1][2]="ヘラ";
my_data[1][3]="女神の女王";
my_data[1][4]="ゼウス";
my_data[1][5]="レア";
my_data[1][6]="クロノス";

……

//データ12
my_data[11][0]="第三世代";
my_data[11][1]="オリンポス";
my_data[11][2]="アプロディーテ";
my_data[11][3]="愛、美";
my_data[11][4]="<br>";
my_data[11][5]="ディオーネー";
my_data[11][6]="ゼウス";

//データ13
my_data[12][0]="第三世代";
my_data[12][1]="オリンポス";
my_data[12][2]="ヘルメス";
my_data[12][3]="伝令、商売、競技、熟練、機敏";
my_data[12][4]="<br>";
my_data[12][5]="マイア";
my_data[12][6]="ゼウス";
//データ1
my_data[0][0]="第三世代";
my_data[0][1]="オリンポス";
my_data[0][2]="ゼウス";
my_data[0][3]="主神";
my_data[0][4]="ヘラ";
my_data[0][5]="レア";

//データ2
my_data[1][0]="第三世代";
my_data[1][1]="オリンポス";
my_data[1][2]="ヘラ";
my_data[1][3]="女神の女王";
my_data[1][4]="ゼウス";
my_data[1][5]="レア";

……

//データ12
my_data[11][0]="第三世代";
my_data[11][1]="オリンポス";
my_data[11][2]="アプロディーテ";
my_data[11][3]="愛、美";
my_data[11][4]="<br>";
my_data[11][5]="ディオーネー";

//データ13
my_data[12][0]="第三世代";
my_data[12][1]="オリンポス";
my_data[12][2]="ヘルメス";
my_data[12][3]="伝令、商売、競技、熟練、機敏";
my_data[12][4]="<br>";
my_data[12][5]="マイア";

次に、スクリプト内の項目名の名称を削除します。

変 更 前変 更 後
ths[0]="世代名";
ths[1]="神族名"
ths[2]="名 前";
ths[3]="説 明";
ths[4]="伴 侶";
ths[5]="母 親";
ths[6]="父 親";
ths[0]="世代名";
ths[1]="神族名"
ths[2]="名 前";
ths[3]="説 明";
ths[4]="伴 侶";
ths[5]="母 親";

最後に、HTML部分のインプットタグを削除します。

変 更 前変 更 後
<input type="checkbox" name="dai">世代名
<input type="checkbox" name="dainame">神族名
<input type="checkbox" name="name">名前<br>
<input type="checkbox" name="syoutyou">説明
<input type="checkbox" name="hanryo">伴侶
<input type="checkbox" name="haha">母親
<input type="checkbox" name="titi">父親<br>
<input type="checkbox" name="dai">世代名
<input type="checkbox" name="dainame">神族名
<input type="checkbox" name="name">名前<br>
<input type="checkbox" name="syoutyou">説明
<input type="checkbox" name="hanryo">伴侶
<input type="checkbox" name="haha">母親

これで、1つの項目を完全に削除できました。

ちなみに、増やす時はこれと反対の要領で、3つの部分の項目を増やしていけばOKです。
項目を増やす際、数字の部分を1つずつ繰り上げていくのを忘れないでください。


(補足)

このスクリプトをフレームで使用し、結果画面を別フレームに表示したい場合はスクリプト内にある
with(document){

with(parent.フレーム名.document){
に直してください。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.