WEST MiRa JavaScript：サンプル集(257種類) - フォーム - データベースVer4 (アドレス帳Ver1)

[ JavaScriptの目次 ]

▲トップページ
▲基礎知識
▲基本操作
▲その他
▲サンプル集(257種類)
▲その他

[ 他の一覧 ]

◆↑ホームへ

■ JavaScript - サンプル集(257種類) - フォーム
　　 - データベースVer4 (アドレス帳Ver1)

データベーススクリプトVer4です。
これは簡易アドレス帳です。応用すれば別のデータベースにもなります。

知りたいデータの横のチェックボックスをオンにすると、そのデータのみ表示されます。

・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」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]="メ　モ";

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

	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]="1111-1111";
	my_data[0][3]="090-1111-1111";
	my_data[0][4]="1960/1/1";
	my_data[0][5]="あいうえお";

	//データ2
	my_data[1][0]="勝山きくこ";
	my_data[1][1]="<br>";
	my_data[1][2]="<br>";
	my_data[1][3]="<br>";
	my_data[1][4]="<br>";
	my_data[1][5]="かきくけこ";

	//データ3
	my_data[2][0]="斉藤しずえ";
	my_data[2][1]="<br>";
	my_data[2][2]="3333-3333";
	my_data[2][3]="090-3333-3333";
	my_data[2][4]="1999/3/3";
	my_data[2][5]="<br>";


	//********** 配置指定 *********
	//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";


	//********** スタイル *********
	//ウィンドウのタイトルを指定
	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 syuukei4()
		{
		var mojis='';
		my_form=new Array();
		for(i=0; i<ths.length; i++)my_form[i]=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+='<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++)
			{
			mojis+='<tr>\n';
			for(j=0; j<ths.length; j++)
				{
				if(my_form[j] == true)
					mojis+='<td bgcolor="'+td_bgcolor+'" align="'+td_align[i]+'"><font size="'+td_textsize+'" color="'+td_textcolor+'">'+my_data[i][j]+'<\/font><\/td>\n';
				}
			mojis+='<\/tr>\n';
			}

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

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

//-->
</script>

</head>

<body>

<form name="form1">
<input type="checkbox" name="namae">名前
<input type="checkbox" name="ado">住所
<input type="checkbox" name="tel">電話番号<br>
<input type="checkbox" name="keitai">携帯
<input type="checkbox" name="bir">誕生日
<input type="checkbox" name="memo">メモ<br>
<input type="button" value="Click!" onClick="syuukei4();">
</form>

　・
　・
　・

</body></html>

[ 解説 ]

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

//データ1
my_data[0][0]="阿河いつき";
my_data[0][1]="北海道";
my_data[0][2]="1111-1111";
my_data[0][3]="090-1111-1111";
my_data[0][4]="1960/1/1";
my_data[0][5]="あいうえお";

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

変　更　前

変　更　後

//データ1
my_data[0][0]="阿河いつき";
my_data[0][1]="北海道";
my_data[0][2]="1111-1111";
my_data[0][3]="090-1111-1111";
my_data[0][4]="1960/1/1";
my_data[0][5]="あいうえお";

//データ2
my_data[1][0]="勝山きくこ";
my_data[1][1]="<br>";
my_data[1][2]="<br>";
my_data[1][3]="<br>";
my_data[1][4]="<br>";
my_data[1][5]="かきくけこ";

//データ3
my_data[2][0]="斉藤しずえ";
my_data[2][1]="<br>";
my_data[2][2]="3333-3333";
my_data[2][3]="090-3333-3333";
my_data[2][4]="1999/3/3";
my_data[2][5]="<br>";

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

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

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

変　更　前

変　更　後

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

　var ths=new Array();
　ths[0]="名　前";
　ths[1]="住　所";
　ths[2]="電話番号";
　ths[3]="携帯・ＰＨＳ";
　ths[4]="誕　生　日";
　ths[5]="メ　モ";

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

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

　<input type="checkbox" name="namae">名前
　<input type="checkbox" name="ado">住所
　<input type="checkbox" name="tel">電話番号<br>
　<input type="checkbox" name="keitai">携帯
　<input type="checkbox" name="bir">誕生日
　<input type="checkbox" name="memo">メモ<br>

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

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

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

変　更　前

変　更　後

//データ1
my_data[0][0]="阿河いつき";
my_data[0][1]="北海道";
my_data[0][2]="1111-1111";
my_data[0][3]="090-1111-1111";
my_data[0][4]="1960/1/1";

//データ2
my_data[1][0]="勝山きくこ";
my_data[1][1]="<br>";
my_data[1][2]="<br>";
my_data[1][3]="<br>";
my_data[1][4]="<br>";

//データ3
my_data[2][0]="斉藤しずえ";
my_data[2][1]="<br>";
my_data[2][2]="3333-3333";
my_data[2][3]="090-3333-3333";
my_data[2][4]="1999/3/3";

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

変　更　前	変　更　後
ths[0]="名　前"; ths[1]="住　所"; ths[2]="電話番号"; ths[3]="携帯・ＰＨＳ"; ths[4]="誕　生　日"; ths[5]="メ　モ";	ths[0]="名　前"; ths[1]="住　所"; ths[2]="電話番号"; ths[3]="携帯・ＰＨＳ"; ths[4]="誕　生　日";

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

変　更　前	変　更　後
<input type="checkbox" name="namae">名前 <input type="checkbox" name="ado">住所 <input type="checkbox" name="tel">電話番号<br> <input type="checkbox" name="keitai">携帯 <input type="checkbox" name="bir">誕生日 <input type="checkbox" name="memo">メモ<br>	<input type="checkbox" name="namae">名前 <input type="checkbox" name="ado">住所 <input type="checkbox" name="tel">電話番号<br> <input type="checkbox" name="keitai">携帯 <input type="checkbox" name="bir">誕生日

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

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

（補足）
このスクリプトをフレームで使用し、結果画面を別フレームに表示したい場合は、スクリプト内にある

with(document){open();

を

with(parent.フレーム名.document){open();

に直してください。

サンプル・ライブラリ・素材　-　All About ［JavaScript］

　 WEST MiRa > JavaScript > サンプル集(257種類) > フォーム > データベースVer4 (アドレス帳Ver1) >

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