一、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#createtable{
margin-left: 200px;
width: 100px;
border: none;
background-color: #00FFFF;
color: white;
height: 30px;
border-radius: 10px;
font-size: 20px;
cursor: pointer;
font-weight: bold;
}
#main{
border: 1px solid;
width: 500px;
padding: 10px;
}
#zjaniu{
margin-left: 200px;
width: 100px;
border: none;
background-color: #00FFFF;
color: white;
height: 30px;
border-radius: 10px;
font-size: 20px;
cursor: pointer;
font-weight: bold;
}
#shanchu{
margin-left: 10px;
}
#table{
width:523px;
margin-top: 20px;
text-align: center;
}
#xiugai{
margin-left: 200px;
width: 100px;
border: none;
background-color: #00FFFF;
color: white;
height: 30px;
border-radius: 10px;
font-size: 20px;
cursor: pointer;
font-weight: bold;
margin-top: 20px;
}
#dijihang{
margin-left: 150px;
}
</style>
</head>
<body>
<div id="main">
<input type="button" value="创建表" onclick="creattable()" id="createtable"/>
<input type="button" value="删除表" onclick="shanchu()" id="xiugai" /><br /><br />
姓名：<input type="text" id="name" placeholder="请输入姓名" />
性别：<input type="text" id="sex" placeholder="请输入性别"/><br /><br />
号码：<input type="text" id="phonenumb" placeholder="请输入手机号码" />
年龄：<input type="text" id="age" placeholder="请输入年龄" /><br /><br />
<input type="button" value="增加" onclick="add()" id="zjaniu" /><br /><br />
<input type="text" id="shanchu" placeholder="按年龄删除" /><input type="button" value="删除" onclick="delbyage()" />
<input type="text" id="select" placeholder="按姓名查找用户信息" onkeyup="sousuo(this)" list="mylist" /><input type="button" value="查找" onclick="findbyname()" />
<br /><br /><br />
姓名：<input type="text" id="newname" placeholder="请输入姓名" />
性别：<input type="text" id="newsex" placeholder="请输入性别"/><br /><br />
号码：<input type="text" id="newphonenumb" placeholder="请输入手机号码" />
年龄：<input type="text" id="newage" placeholder="请输入年龄" /><br /><br />
<input type="text" id="dijihang" placeholder="请输入要修改的rowid" />
<input type="button" value="修改" onclick="change()" id="xiugai" />
</div>
<table id="table" border="1px" cellpadding="5" cellspacing="0" >
<tr>
<th>姓名</th>
<th>性别</th>
<th>手机号</th>
<th>年龄</th>
</tr>
</table>
<datalist id="mylist"></datalist>
<script type="text/javascript">
var db;
var arr1=new Array();
var arr2=new Array();
window.οnlοad=function(){
creatdb();
selectxm();
};
function creatdb(){
if(window.openDatabase){
db=openDatabase("mydb","1.0","这是手机通讯录数据库",10*1024*1024);
}
else{
alert("浏览器不支持WEB SQL DB");
}
}
function executesql(sqlstring,arr,fun1,fun2){
db.transaction(function(tx){
tx.executeSql(sqlstring,arr,fun1,fun2);
});
}
function creattable(){
executesql("CREATE TABLE IF NOT EXISTS people(name PRIMARY KEY,sex,phonenumb,age)",[],function(){alert("创建成功");},function(error){console.log(error);});
}
function add(){
var name=document.getElementById("name").value;
var sex=document.getElementById("sex").value;
var phonenumb=document.getElementById("phonenumb").value;
var age=document.getElementById("age").value;
executesql("insert into people(name,sex,phonenumb,age) values(?,?,?,?)",[name,sex,phonenumb,age],
function(){
alert("增加成功");
},
function(errpr){
console.log(error);
}
)
}
function delbyage(){
var ag=document.getElementById("shanchu").value;
var sql1="delete from people where age=?";
// var sql2="delete from people where name=?";
// var sql3="delete from people where sex=?";
// var sql4="delete from people where phonenumb=?";
executesql(sql1,[ag],function(){alert("删除成功");});
// executesql(sql2,[ag],function(){alert("删除成功");});
// executesql(sql3,[ag],function(){alert("删除成功");});
// executesql(sql4,[ag],function(){alert("删除成功");});
}
function findbyname(){
var xm=document.getElementById("select").value;
var table1=document.getElementById("table");
// table1.innerHTML="";
var sql="select * from people where name=?";
executesql(sql,[xm],function(tx,tab){
for (var i = 0; i < tab.rows.length; i++) {
if(tab.rows.item(i).name==xm){
var tr=document.createElement('tr');
table1.appendChild(tr);
var td1=document.createElement("td");
tr.appendChild(td1);
td1.innerHTML=tab.rows.item(i).name;
var td2=document.createElement("td");
tr.appendChild(td2);
td2.innerHTML=tab.rows.item(i).sex;
var td3=document.createElement("td");
tr.appendChild(td3);
td3.innerHTML=tab.rows.item(i).phonenumb;
var td4=document.createElement("td");
tr.appendChild(td4);
td4.innerHTML=tab.rows.item(i).age;
}
}
})
}
function change(){
var newname=document.getElementById("newname").value;
var newsex=document.getElementById("newsex").value;
var newphonenumb=document.getElementById("newphonenumb").value;
var newage=document.getElementById("newage").value;
var id=document.getElementById("dijihang").value;
var sql="UPDATE people SET name=?,sex=?,phonenumb=?,age=? WHERE rowid =?";
executesql(sql,[newname,newsex,newphonenumb,newage,id],function(){alert("修改成功")});
}
function shanchu(){
var sql="DROP table peopel";
executesql(sql,[],function(){alert("删除成功");});
}
function selectxm(){
var sql="select name,phonenumb from people";
executesql(sql,[],function(tx,tab){
for (var i = 0; i < tab.rows.length; i++) {
arr1.push(tab.rows.item(i).name);
arr2.push(tab.rows.item(i).phonenumb);
}
// alert(arr1.length+" "+arr2.length);
})
}
function sousuo(t){
if(t.value!=""){
var list=document.getElementById("mylist");
list.innerHTML="";
for (var i = 0; i < arr1.length; i++) {
var ret=new RegExp("^"+t.value);
if(ret.test(arr1[i])){
var op=new Option(arr1[i]+" "+arr2[i]);
list.appendChild(op);
}
}
}
}
</script>
</body>
</html>
二、效果图
