【1】「sample010.html」を以下のように更新してください。コピーして貼り付けてもかまいません。
<html>
<head>
<script type="text/javascript" src="sample010.js"></script>
<title>sample010</title>
</head>
<body>
都道府県マスター
<form name="form1">
PREF_CD:<input type="text" name="txtPrefCd" id="txtPrefCd">
<a href="JavaScript:;" name="linkMaxCd" id="linkMaxCd">最大値</a>
PREF_NAME:<input type="text" name="txtPrefName" id="txtPrefName">
<input type="button" name="btnInsert" id="btnInsert" value="追加">
<input type="button" name="btnUpdate" id="btnUpdate" value="更新">
<input type="button" name="btnDelete" id="btnDelete" value="削除">
</form>
<div id="sqlDisplay"></div>
<textarea name="dataDisplay" id="dataDisplay" rows="20" cols="75"></textarea>
</body>
</html>
【2】「sample010.js」を以下のように更新してください。コピーして貼り付けてもかまいません。
var database;
var txtPrefCd;
var txtPrefName;
onload = init;
onunload = dbClose;
function init() {
//初期設定をする関数
txtPrefCd = document.getElementById("txtPrefCd");
txtPrefName = document.getElementById("txtPrefName");
txtPrefCd.onblur = function (){blur(this);}
txtPrefCd.onfocus = function (){focus(this);}
txtPrefName.onblur = function (){blur(this);}
txtPrefName.onfocus = function (){focus(this);}
document.getElementById("btnInsert").onclick = function (){dataInsert();}
document.getElementById("btnUpdate").onclick = function (){dataUpdate();}
document.getElementById("btnDelete").onclick = function (){dataDelete();}
document.getElementById("linkMaxCd").onclick = function (){maxCd();}
dbConnect();
dataDisplay();
}
function dbConnect() {
//データベースに接続する関数
database = new ActiveXObject("ADODB.Connection");
database.Open("Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\\SampleDB010.mdb;");
alert("データベースに接続しました。");
}
function dbClose() {
//データベースを切断する関数
database.Close();
database = null;
alert("データベースを切断しました。");
}
function focus(obj){
obj.style.backgroundColor = "#ffff00";
}
function blur(obj){
obj.style.backgroundColor = "#ffffff";
}
function dataDisplay() {
//データを表示する関数
var mySql = "select * from T01Prefecture order by PREF_CD";
var recordSet = database.Execute(mySql);
var tempText = "";
document.getElementById("dataDisplay").value = "";
while (!recordSet.EOF){
tempText = tempText + recordSet(0) + ":" + recordSet(1) + "\n";
recordSet.MoveNext();
}
document.getElementById("dataDisplay").value = tempText;
recordSet.Close();
recordSet = null;
}
function dataInsert() {
//データを追加する関数
try{
if(dataCheck(txtPrefCd,"PREF_CD") && dataCheck(txtPrefName,"PREF_NAME")){
var mySql = "insert into T01Prefecture values(" + Number(txtPrefCd.value) + ",'" + txtPrefName.value + "')";
sqlDisplay(mySql);
database.Execute(mySql);
dataDisplay();
alert("追加しました。");
}
}catch(error){
alert(error.number + "\n" + error.description);
}
}
function dataUpdate() {
//データを更新する関数
if(dataCheck(txtPrefCd,"PREF_CD") && dataCheck(txtPrefName,"PREF_NAME")){
var mySql = "update T01Prefecture set PREF_NAME ='" + txtPrefName.value + "' where PREF_CD = " + Number(txtPrefCd.value);
sqlDisplay(mySql);
database.Execute(mySql);
dataDisplay();
alert("更新しました。");
}
}
function dataDelete() {
//データを削除する関数
if(dataCheck(txtPrefCd,"PREF_CD")){
var mySql = "delete from T01Prefecture where PREF_CD = " + Number(txtPrefCd.value);
sqlDisplay(mySql);
database.Execute(mySql);
dataDisplay();
alert("削除しました。");
}
}
function sqlDisplay(_mySql) {
//SQLを表示する関数
document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}
function dataCheck(obj,myStr){
//データをチェックする関数
if (obj.value == "") {
alert(myStr + "は必ず入力してください。");
return false;
}else{
return true;
}
}
function maxCd(){
//最大値を取得する関数
var mySql = "select max(PREF_CD) from T01Prefecture";
var recordSet = database.Execute(mySql);
txtPrefCd.value = recordSet(0) + 1;
txtPrefName.focus();
}
【3】保存したら sample010.html をダブルクリックしてWebブラウザで開きます。
★sample010.htmlとsample010.jsは必ず同じフォルダ内に置いてください。
【4】新しく「最大値」というテキストリンクができていますのでクリックします。
【5】PREF_CDのテキストボックスに現在一番大きい番号に1を足した値が自動で入力され、フォーカスがPREF_NAMEのテキストボックスに移動しました。
【解説】
html側には新しくテキストリンクを作りました。
<a href="JavaScript:;" name="linkMaxCd" id="linkMaxCd">最大値</a>
普通href=""にはリンク先を書きますが、今回はページを移動したくないので「href="JavaScript:;"」と書いて何もしない設定にしています。「href="#"」とかく方法もありますが同じページのラベルに移動したことになります。他にいい方法があるかもしれません。
JavaScript側では関数init()で新しく作ったテキストリンクにイベントハンドラの設定を行っています。リンクをクリックした時には関数maxCd()が呼び出されます。
document.getElementById("linkMaxCd").onclick = function (){maxCd();}
次は関数maxCd()の中を詳しくみていきましょう。
まずPREF_CDの最大値を取得するSQL文を作って変数mySqlに代入しています。
var mySql = "select max(PREF_CD) from T01Prefecture";
SQL文を実行してレコードセットを取得しています。この場合最大値を表す1行1列のレコードが1件だけが返ってきます。
var recordSet = database.Execute(mySql);
レコードセットから最初のフィールド（1列目）のデータを取り出し、1を加えて最大値とします。それをPREF_CDのテキストボックスに代入しています。
txtPrefCd.value = recordSet(0) + 1;
フォーカスをPREF_NAMEのテキストボックスに移動しています。PREF_CDにフォーカスしてもかまいません。
txtPrefName.focus();
