関数名にdelete()と付けようとしたら、JavaScriptの予約語なのでユーザーが勝手に使うことができないようです。そこで違う関数名を検討しなければならないのですが、ついでに今までのプログラムを整理して、名前から働きが推測できるように改良しました。したがってsample010.html、sample010.jsの両方を更新してください。
【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">
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>
<div id="dataDisplay">ここにデータを表示</div>
</body>
</html>
【2】「sample010.js」を以下のように更新してください。コピーして貼り付けてもかまいません。
var database;
onload = init;
onunload = dbClose;
function init() {
//初期設定をする関数
document.getElementById("txtPrefCd").onblur = function (){blur(this);}
document.getElementById("txtPrefCd").onfocus = function (){focus(this);}
document.getElementById("txtPrefName").onblur = function (){blur(this);}
document.getElementById("txtPrefName").onfocus = function (){focus(this);}
document.getElementById("btnInsert").onclick = function (){dataInsert();}
document.getElementById("btnUpdate").onclick = function (){dataUpdate();}
document.getElementById("btnDelete").onclick = function (){dataDelete();}
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 tempHtml="";
document.getElementById("dataDisplay").innerHTML = "";
while (!recordSet.EOF){
tempHtml = tempHtml + recordSet(0) + ":" + recordSet(1) + "<br />";
recordSet.MoveNext();
}
document.getElementById("dataDisplay").innerHTML = tempHtml;
recordSet.Close();
recordSet = null;
}
function dataInsert() {
//データを追加する関数
with (document.form1) {
var mySql = "insert into T01Prefecture values(" + Number(txtPrefCd.value) + ",'" + txtPrefName.value + "')";
}
document.getElementById("sqlDisplay").innerHTML = "<p>" + mySql + "</p>";
database.Execute(mySql);
dataDisplay();
alert("追加しました。");
}
function dataUpdate() {
//データを更新する関数
with (document.form1) {
var mySql = "update T01Prefecture set PREF_NAME ='" + txtPrefName.value + "' where PREF_CD = " + Number(txtPrefCd.value);
}
document.getElementById("sqlDisplay").innerHTML = "<p>" + mySql + "</p>";
database.Execute(mySql);
dataDisplay();
alert("更新しました。");
}
function dataDelete() {
//データを削除する関数
with (document.form1) {
var mySql = "delete from T01Prefecture where PREF_CD = " + Number(txtPrefCd.value);
}
document.getElementById("sqlDisplay").innerHTML = "<p>" + mySql + "</p>";
database.Execute(mySql);
dataDisplay();
alert("削除しました。");
}
【3】保存したら sample010.html をダブルクリックしてWebブラウザで開きます。
★sample010.htmlとsample010.jsは必ず同じフォルダ内に置いてください。
【4】データを削除する前に現在のレコードを確認しておきます。最後のレコードが「99:テスト2」であることを確認してください。
【5】PREF_CDに半角で「99」と入力します。今回は削除ですのでPREF_CDは既に存在する番号にしてください。PREF_NAMEは削除に使いませんので未入力でかまいません。
【6】入力したら「削除」ボタンをクリックします。
【7】「削除しました。」というメッセージが表示されます。「OK」をクリックします。
【8】SQLが正しく表示されていることを確認してください。
【9】Webブラウザ上のデータが更新されているか確認してください。
【10】データベース「SampleDB010.mdb」のテーブル「T01Prefecture」を開き、データが削除されていることを確認してください。
【11】確認が済んだら「SampleDB010.mdb」は閉じます。
【解説】
今回関数名とhtmlのidを見直しましたが、プログラムの流れは前回までと同じです。
init()の中には1行だけ追加しています。
document.getElementById("btnDelete").onclick = function (){dataDelete();}
これは「削除」ボタンをクリックした時に、関数dataDelete()を呼び出すという意味です。
dataDelete()はデータを削除する関数として作成しました。SQL文以外は追加、更新と同じですね。そのためSQL文についてのみ説明します。
var mySql = "delete from T01Prefecture where PREF_CD = " + Number(txtPrefCd.value);
【SQL文の組み立て方】
最終的に組み立てたいSQL文です。
delete from T01Prefecture where PREF_CD = 99
全体を「"」（ダブルクォーテーション）で囲みます。
"delete from T01Prefecture where PREF_CD = 99"
値をコントロールや変数に置き換えます。
"delete from T01Prefecture where PREF_CD = Number(txtPrefCd.value)"
コントロールや変数の前後に半角空白を入れ切り離します。
"delete from T01Prefecture where PREF_CD = Number(txtPrefCd.value) "
コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。
"delete from T01Prefecture where PREF_CD = " Number(txtPrefCd.value)
コントロールや変数と文字列を「+」で結合します。
"delete from T01Prefecture where PREF_CD = " + Number(txtPrefCd.value)
あとは変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けるだけです。
var mySql = "delete from T01Prefecture where PREF_CD = " + Number(txtPrefCd.value);
そろそろSQLの組み立て方のコツがつかめてきたのではないでしょうか。
