スポンサードリンク

データを削除

今回は既に入力されているレコードをJavaScriptを使って削除してみます。

関数名に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」であることを確認してください。

javascript-45.gif


【5】PREF_CDに半角で「99」と入力します。今回は削除ですのでPREF_CDは既に存在する番号にしてください。PREF_NAMEは削除に使いませんので未入力でかまいません。

javascript-46.gif


【6】入力したら「削除」ボタンをクリックします。

javascript-47.gif


【7】「削除しました。」というメッセージが表示されます。「OK」をクリックします。

javascript-48.gif


【8】SQLが正しく表示されていることを確認してください。

javascript-49.gif


【9】Webブラウザ上のデータが更新されているか確認してください。

javascript-50.gif


【10】データベース「SampleDB010.mdb」のテーブル「T01Prefecture」を開き、データが削除されていることを確認してください。

javascript-51.gif


【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の組み立て方のコツがつかめてきたのではないでしょうか。


スポンサードリンク






JavaScript初心者入門講座TOPへ