html连接mysql数据库代码_HTML5操作WebSQL数据库的实例代码

HTML代码：

列车时刻表查询

列车时刻表查询

请给我留言

姓名：留言：

留言

• 查询

• 收藏

• 给我留言

Close

收藏成功，暂且不做处理!.

请点击右上角有个关闭按钮

提示： 你也可以点击弹窗的外部区域来关闭弹窗。

JS代码：

/**

* HTML5 操作本地WebSQL数据库

* 作者：汪政

* 时间：2017/08/26 15：03：19

*/

var datatable = null;

var db = openDatabase("MyData", "", "My Database", 1024 * 100);

//初始化函数方法

function init() {

datatable = document.getElementById("datatable");

showAllData();

}

//首先移除乱七八糟的东西

function removeAllData() {

for(var i = datatable.childNodes.length - 1; i >= 0; i--) {

datatable.removeChild(datatable.childNodes[i]);

}

var tr = document.createElement("tr");

var th1 = document.createElement("th");

var th2 = document.createElement("th");

var th3 = document.createElement("th");

th1.innerHTML = "姓名";

th2.innerHTML = "留言";

th3.innerHTML = "时间";

tr.appendChild(th1);

tr.appendChild(th2);

tr.appendChild(th3);

datatable.appendChild(tr);

}

//显示WebSQL中的数据

function showData(row) {

var tr = document.createElement("tr");

var td1 = document.createElement("td");

td1.innerHTML = row.name;

var td2 = document.createElement("td");

td2.innerHTML = row.message;

var td3 = document.createElement("td");

var t = new Date();

t.setTime(row.time);

td3.innerHTML = t.toLocaleDateString() + " " + t.toLocaleTimeString();

tr.appendChild(td1);

tr.appendChild(td2);

tr.appendChild(td3);

datatable.appendChild(tr);

}

//显示所有的数据

function showAllData() {

db.transaction(function(tx) {

tx.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)", []);

tx.executeSql("SELECT * FROM MsgData", [], function(tx, rs) {

removeAllData();

for(var i = 0; i < rs.rows.length; i++) {

showData(rs.rows.item(i))

}

})

})

}

//添加数据

function addData(name, message, time) {

db.transaction(function(tx) {

tx.executeSql("INSERT INTO MsgData VALUES (?,?,?)", [name, message, time], function(tx, rs) {

alert("留言成功！");

},

function(tx, error) {

alert(error.source + "::" + error.message);

}

)

})

}

//调用

function saveData() {

var name = document.getElementById("name").value;

var memo = document.getElementById("memo").value;

var time = new Date().getTime();

addData(name, memo, time);

showAllData();

}

我们有两个方法来进行软件设计：一个是让其足够的简单以至于让BUG无法藏身；另一个就是让其足够的复杂，让人找不到BUG。前者更难一些。

总结

以上所述是小编给大家介绍的HTML5操作WebSQL数据库的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！