HTML5 Web SQL 数据库查询数据 - W3CAPI 在线教程

源代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>HTML5 Web SQL 数据库 查询数据</title>
</head>

<body>

</body>

//支持Web SQL
        var db = null;
        try {
            db = openDatabase('w3capi', '1.0', 'Test DB', 2 * 1024 * 1024, function (newdb) {
                console.log(newdb);
            });
        } catch (e) {
            db = openDatabase('w3capi', '', 'Test DB', 2 * 1024 * 1024, function (newdb) {
                console.log(newdb);
            });
        }

db.transaction(function (tx) {

tx.executeSql('CREATE TABLE IF NOT EXISTS user (id unique, name)',[],function(tran,res){
 document.getElementById("info").innerHTML += "创建数据表后执行回掉函数，结果为"+res.rowsAffected+" ";
 },function(tran,error) {
 document.getElementById("info").innerHTML += "创建数据表错误回掉，错误为："+error.message+" ";
 });

tx.executeSql('INSERT INTO user (id, name) VALUES (1, "小王")',[],function(tran,res){
 document.getElementById("info").innerHTML += "插入数据后执行回掉函数，结果为"+res.rowsAffected+" ";
 },function(tran,error) {
 document.getElementById("info").innerHTML += "插入数据错误回掉，错误为："+error.message+" ";
 });

tx.executeSql('INSERT INTO user (id, name) VALUES (2, "小李")',[],function(tran,res){
 document.getElementById("info").innerHTML += "插入数据后执行回掉函数，结果为"+res.rowsAffected+" ";
 },function(tran,error) {
 document.getElementById("info").innerHTML += "插入数据错误回掉，错误为："+error.message+" ";
 });

var id=3,name='小张';
 tx.executeSql('INSERT INTO user (id,name) VALUES (?, ?)', [id, name],function(tran,res){
 document.getElementById("info").innerHTML += "插入数据后执行回掉函数，结果为"+res.rowsAffected+" ";
 },function(tran,error) {
 document.getElementById("info").innerHTML += "插入数据错误回掉，错误为："+error.message+" ";
 });

tx.executeSql('SELECT * FROM user ', [], function (tran, res) {
 var len = res.rows.length, i;
 var msg = "查询user表中记录数量: " + len + "";
 document.querySelector('#info').innerHTML += msg;

for (i = 0; i < len; i++){
 msg = "" + res.rows.item(i).name + "";
 document.querySelector('#info').innerHTML += msg;
 }
 },function(tran,error) {
 document.getElementById("info").innerHTML += "查询数据错误回掉，错误为："+error.message+" ";
 });

});
 }
</script>

</html>

运行结果

W3CAPI 实例工具箱