Web SQL データベースのテーブルにレコードを挿入するコードを紹介します。
概要
テーブルにレコードを挿入したり、更新、削除する場合は、Web SQLでSQLを実行します。
SQL文の書式については
を参照してください。
プログラム例:レコードの挿入
コード
下記の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ブラウザで表示します。下図のページが表示されます。
[InsertRecord]のリンクをクリックします。
レコードが挿入されるごとに[SUCCESS]のダイアログが表示されます。今回5レコード挿入していますので、アラートダイアログも5回表示されます。
データベースに挿入されたレコードを確認する方法は
こちらの記事を参照してください。
プログラム例:レコードの更新
コード
下記の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ページをWebブラウザで表示します。下図のページが表示されます。
[UpdateRecord (id=4 price=160)]のリンクをクリックします。SQL文が実行され[SUCCESS]のダイアログが表示されます。
再度、レコードの内容を表示します。id=4 の price の値が変更されていることが確認できます。
プログラム例:レコードの削除
コード
下記の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>
解説
データベースを開き、DELETE文のSQLを実行してレコードを削除します。
削除するレコードのIDは
Proc()
関数の引数として与えています。
実行結果
レコード更新前のレコード内容を確認します。レコードの値の表示は
こちらの記事を参照してください。
上記のWebページをWebブラウザで表示します。下図のページが表示されます。
[DeleteRecord (id=4)]のリンクをクリックします。SQL文が実行され[SUCCESS]のダイアログが表示されます。
再度、レコードの内容を表示します。id=4 の レコードが削除されていることが確認できます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2023-08-28
作成日: 2021-05-15