浏览器本地mysql_本地浏览器Websql数据库操作

/*.table,table tr th, table tr td { border:1px solid #0094ff; }*/#tab1 th, td,tr{border:1px solid #4cff00;

}.btn{display:inline-flex;justify-content:center;align-items:center;text-decoration:none; /*for link*/margin:2px;border:1px solid transparent;border-radius:4px;padding:.5em 1em;color:#fff;background-color:#ff0000;

}.ubtn{display:inline-flex;justify-content:center;align-items:center;text-decoration:none; /*for link*/margin:2px;border:1px solid transparent;border-radius:4px;padding:.5em 1em;color:#fff;background-color:#49ff00;

}

functioninitDatabase() {vardb=getCurrentDb();//初始化数据库

if(!db) {

alert("您的浏览器不支持HTML5本地数据库");return;

}

db.transaction(function(trans) {//启动一个事务，并设置回调函数//执行创建表的Sql脚本

trans.executeSql("create table if not exists Demo(id int primary key,uName text null,title text null,types text null)", [],function(trans, result) {

},function(trans, message) {//消息的回调函数

alert(message);

});

});

}//随机数

functionRndNum(n) {varrnd= "";for(vari= 0; i

rnd+=Math.floor(Math.random()* 10);returnrnd;

}//添加

$(function() {//alert(111);

initDatabase();

$("#btnSave").click(function() {vartxtName=$("#txtName").val();vartxtTitle=$("#txtTitle").val();//var txtTypes = $("#txtTypes").val();

vartxtTypes=$("#sel option:selected").val();vardb=getCurrentDb();varmyDate= newDate();varnum= "";

num+=myDate.getYear();

num+=myDate.getMonth();

num+=myDate.getDate();

num+=RndNum(4);//执行sql脚本，插入数据

if(txtTypes== "1") {

alert("请选择类型！");

}else{

db.transaction(function(trans) {

trans.executeSql("insert into Demo(id,uName,title,types) values(?,?,?,?)", [num,txtName, txtTitle, txtTypes],function(ts, data) {

},function(ts, message) {

alert(message);

});

});

showAllTheData();

}

});

});functiongetCurrentDb() {//打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小//如果数据库不存在那么创建之

vardb=openDatabase("myDb","1.0","it's to save demo data!",2*1024 * 1024);;returndb;

}//显示所有数据库中的数据到页面上去

functionshowAllTheData() {//$("#tblData").empty();

$("#tab1").empty();vardb=getCurrentDb();

db.transaction(function(trans) {

trans.executeSql("select * from Demo", [],function(ts, data) {if(data) {vartxtName=data.uName;vartxtTitle=data.title;vartypes=data.types;varstrHtml= "";vardv=document.getElementById("dv");varreslut= "

reslut+= "

id姓名标题类型操作";for(vari= 0; i ";

reslut+= "

" +data.rows.item(i)['id']+ "" +data.rows.item(i)['uName']+ "" +data.rows.item(i)['title']+ "" +data.rows.item(i)['types']+

"

";//" + (i + 1) + "//appendDataToTable(data.rows.item(i));//获取某行数据的json对象

dv.innerHTML=reslut;

}

}

},function(ts, message) { alert(message);vartst=message; });

});

}functionappendDataToTable(data) {//将数据展示到表格里面//uName,title,words

vartxtName=data.uName;vartxtTitle=data.title;vartypes=data.types;varstrHtml= "";vardv=document.getElementById("dv");vardata= "

data+= "

姓名标题类型";

data+= "

" +txtName+ "" +txtTitle+ "" +types+ "";//dv.innerHTML = data;//$("#dv").append(data);;

//strHtml += "

姓名标题类型";/*strHtml += "";

strHtml += "

";

strHtml += "

" + txtName + "";

strHtml += "

" + txtTitle + "";

strHtml += "

" + types + "";

strHtml += "";

strHtml += "

";

$("#tblData").append(strHtml);*/

//tblData.innerHTML = strHtml;

}//执行事务

functionsqlExcute(sql, message) {vardb=getCurrentDb();

db.transaction(function(trans) {

trans.executeSql(

sql,

[],function() {//success

alert(message);

},function(trans, ex) { alert(ex.message) }

);

},function() { alert("事务执行失败，建议使用谷歌浏览器") },function() {//success

}

);

};//删除数据

functiontests(mes) {//alert(mes);

if(confirm("是否删除此用户？id为:" +mes)== true) {

del(mes);

}

showAllTheData();//showUserInfo();

};functiondel(id) {//var db = getCurrentDb();//db.transaction(function (trans){//trans.executeSql("delete * from Demo where uNmae='a'");

varsql= "delete from Demo where id =" +id+ "";

sqlExcute(sql,"成功删除信息！");//});

}//修改数据

functionutests(mes) {//alert(mes);//showUserInfo();

varuptable=document.getElementById("tab1");for(vari= 0; i

if(mes==uptable.rows[i].cells[0].innerHTML) {//alert(uptable.rows[i].cells[1].getAttribute("contentEditable"));//uptable.rows[i].cells[1].focus();

if(uptable.rows[i].cells[1].getAttribute("contentEditable")== null) {

uptable.rows[i].cells[1].setAttribute("contentEditable","true");

uptable.rows[i].cells[2].setAttribute("contentEditable","true");

document.getElementById(mes).setAttribute("class","ubtn");

document.getElementById(mes).setAttribute("value","save");

uptable.rows[i].cells[1].focus();

}else{//alert("ddd");

varsql= "update Demo set uName='" +uptable.rows[i].cells[1].innerHTML+ "',title='" +uptable.rows[i].cells[2].innerHTML+ "' where id =" +mes+ "";

sqlExcute(sql,"成功修改账号信息！");

showAllTheData();

}

}

}//showUserInfo();

};

websql操作

用户名：标   题：分   类：

--请选择--

水果

蔬菜

豆类

大米