iPentec.com / Document / カテゴリ: JavaScript / タグ: JavaScript Web SQL

Web SQL データベースのテーブルにレコードを挿入、更新、削除する

概要

テーブルにレコードを挿入したり、更新、削除する場合は、Web SQLでSQLを実行します。
SQL文の書式については

挿入 INSERT文はこちらの記事
更新 UPDATE文はこちらの記事
削除 DELETE文はこちらの記事

を参照してください。

プログラム例:レコードの挿入

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script>
    function Proc() {
      var db = OpenMyDatabase();
      InsertRecord(db);
    }

    function OpenMyDatabase() {
      var dbsize = 1000;
      var dbname = "myDB";
      var dbversion = "1.0";
      var dbdescription = "Test Database"
      var db = window.openDatabase(dbname, dbversion, dbdescription, dbsize);
      if (db == null) {
        alert("データベースが開けませんでした。");
      }
      return db;
    }

    function InsertRecord(dbobj) {
      dbobj.transaction(
        function (transact) {
          transact.executeSql("INSERT INTO product VALUES ( ?, ?, ? )", ['1', 'ぺんぎんクッキー', '280'], function () { alert("SUCCESS"); }, function () { alert("ERROR"); });
          transact.executeSql("INSERT INTO product VALUES ( ?, ?, ? )", ['2', 'しろくまアイス', '160'], function () { alert("SUCCESS"); }, function () { alert("ERROR"); });
          transact.executeSql("INSERT INTO product VALUES ( ?, ?, ? )", ['3', 'らくだキャラメル', '90'], function () { alert("SUCCESS"); }, function () { alert("ERROR"); });
          transact.executeSql("INSERT INTO product VALUES ( ?, ?, ? )", ['4', 'かるがもサブレ', '85'], function () { alert("SUCCESS"); }, function () { alert("ERROR"); });
          transact.executeSql("INSERT INTO product VALUES ( ?, ?, ? )", ['5', 'きりんキャンディー', '50'], function () { alert("SUCCESS"); }, function () { alert("ERROR"); });
        }
      );
    }
  </script>

</head>
<body>
  <p>レコードの挿入 テストページ</p>
  <a href="javascript:Proc();">InsertRecord</a><br />
</body>
</html>

解説

データベースを開き、INSERT文のSQLを実行してレコードを挿入します。
今回のコードではSQLパラメーターを利用しており、SQL文中には値を埋め込まずプレースホルダーの "?" を記述しています。

"INSERT INTO product VALUES ( ?, ?, ? )"

"?"のプレースホルダーに挿入される値を第二引数の配列で指定しています。

['1', 'ぺんぎんクッキー', '280']

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
Web SQL データベースのテーブルにレコードを挿入、更新、削除する:画像1

[InsertRecord]のリンクをクリックします。
レコードが挿入されるごとに[SUCCESS]のダイアログが表示されます。今回5レコード挿入していますので、アラートダイアログも5回表示されます。
Web SQL データベースのテーブルにレコードを挿入、更新、削除する:画像2

データベースに挿入されたレコードを確認する方法はこちらの記事を参照してください。

プログラム例:レコードの更新

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
    function Proc(sid, sprice) {
      var db = OpenMyDatabase();
      UpdateRecord(db, sid, sprice);
    }

    function OpenMyDatabase() {
      var dbsize = 1000;
      var dbname = "myDB";
      var dbversion = "1.0";
      var dbdescription = "Test Database"
      var db = window.openDatabase(dbname, dbversion, dbdescription, dbsize);
      if (db == null) {
        alert("データベースが開けませんでした。");
      }
      return db;
    }

    function UpdateRecord(dbobj,tid,tprice) {
      dbobj.transaction(
        function (transact) {
          transact.executeSql("UPDATE product SET price='" + tprice + "' WHERE id='" + tid+"'", [],
            function () { alert("SUCCESS"); }, function () { alert("ERROR"); });
        }
      );
    }
  </script>
</head>
<body>
  <p>レコードの更新 テストページ</p>
  <a href="javascript:Proc(4,160);">UpdateRecord (id=4 price=160)</a><br />
  <a href="javascript:Proc(4,85);">UpdateRecord (id=4 price=85)</a><br />
</body>
</html>

解説

データベースを開き、UPDATE 文のSQLを実行してレコードを更新します。
更新する値はProc()関数の引数として与えています。

実行結果

レコード更新前のレコード内容を確認します。レコードの値の表示はこちらの記事を参照してください。
Web SQL データベースのテーブルにレコードを挿入、更新、削除する:画像3

上記のWebページをWebブラウザで表示します。下図のページが表示されます。
Web SQL データベースのテーブルにレコードを挿入、更新、削除する:画像4

[UpdateRecord (id=4 price=160)]のリンクをクリックします。SQL文が実行され[SUCCESS]のダイアログが表示されます。
Web SQL データベースのテーブルにレコードを挿入、更新、削除する:画像5

再度、レコードの内容を表示します。id=4 の price の値が変更されていることが確認できます。
Web SQL データベースのテーブルにレコードを挿入、更新、削除する:画像6

プログラム例:レコードの削除

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
    function Proc(deleteid) {
      var db = OpenMyDatabase();
      DeleteRecord(db, deleteid);
    }

    function OpenMyDatabase() {
      var dbsize = 1000;
      var dbname = "myDB";
      var dbversion = "1.0";
      var dbdescription = "Test Database"
      var db = window.openDatabase(dbname, dbversion, dbdescription, dbsize);
      if (db == null) {
        alert("データベースが開けませんでした。");
      }
      return db;
    }

    function DeleteRecord(dbobj,deleteid) {
      dbobj.transaction(
        function (transact) {
          transact.executeSql("DELETE FROM product WHERE id='" + deleteid + "'", [], function () { alert("SUCCESS"); }, function () { alert("ERROR"); });
        }
      );
    }
  </script>
</head>
<body>
  <p>レコードの削除 テストページ</p>
  <a href="javascript:Proc(4);">DeleteRecord (id=4)</a><br />
</body>
</html>