通过web sql实现增删查改

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>***添加学生***</h3>
学号:<input type="text" id="id"/><br/>
姓名:<input type="text" id="name"/><br/>
操作:
<input type="button" value="添加学生" id="addStuInfo"/>
<input type="button" value="显示所有" id="showAllStuBtn"/>
<div id="showAllStu"></div>
<hr/>
<h3>***精确查找***</h3>
输入查询学生的学号:
<input type="text" id="stuID"/>
<input type="button" value="查询学生" id="searchBtn"/><br/>
<div id="showSearchStu"></div>
<hr/>
<h3>***模糊查找***</h3>
输入名字中的某个字:
<input type="text" id="stuName"/>
<input type="button" value="查询学生" id="blurSearchBtn"/>
<div id="showSimilarStu"></div>
<script>
window.onload=function(){
var db=openDatabase("stuInfo","1.0","students information",1024*1024);
//添加数据
db.transaction(function(tx){
tx.executeSql("create table if not exists stuTable (stu_id int primary key,stu_name varchar(10) not null)");
//int:数据库中数据类型为整数类型
//varchar(n):数据库中数据类型字符串类型,最大长度为n
//primary key:确保某列有唯一标识,有助于更容易快速的找到表中的一个特定记录
//是not null和unique的集合,并且规定了表中的主键
//主键:
//1)主键必须包含唯一的值
//2) 主键列不能包含null值
//3) 每个表中都应该有一个主键,并且每个表只能有一个主键
//not null:指示某列不能存储null值
});
//添加数据
$("addStuInfo").onclick=function(){
var _name=$("name").value;
var _id=$("id").value;
db.transaction(function(tx){
tx.executeSql("insert into stuTable values (?,?)",[_id,_name],function(){
alert("添加成功")
},function(){
alert("添加信息有误")
})
})
}
//显示所有数据
$("showAllStuBtn").onclick=function(){
$("showAllStu").innerHTML=null;
db.transaction(function(tx){
tx.executeSql("select * from stuTable",[],function(tx,res){
var len=res.rows.length;
dataRes="<span>总共有"+len+"条数据</span>";
for(var i=0;i<len;i++){
dataRes="<p>学号:"+res.rows.item(i).stu_id+"姓名:"+res.rows.item(i).stu_name+"</p>";
$("showAllStu").innerHTML+=dataRes;
}
})
})
}
//通过学号精确查找
$("searchBtn").onclick=function(){
var _id=$("stuID").value;
db.transaction(function(tx){
tx.executeSql("select * from stuTable where stu_id=?",[_id],function(tx,res){
$("showSearchStu").innerHTML=res.rows.item(0).stu_name;
})
})
};
//通过姓名模糊查找
$("blurSearchBtn").onclick=function(){
var find="%"+$("stuName").value+"%";
db.transaction(function(tx){
tx.executeSql("select * from stuTable where stu_name like ?",[find],function(tx,res){
var len=res.rows.length;
dataRes="<span>总共有"+len+"条数据</span>";
for(var i=0;i<len;i++){
dataRes="<p>学号:"+res.rows.item(i).stu_id+"姓名:"+res.rows.item(i).stu_name+"</p>";
$("showSimilarStu").innerHTML+=dataRes;
}
});
//%:替代0个或多个字符,与like一起使用
//a%:匹配a开头
//%a%:匹配包含a
//%a:匹配a结尾
//like:用于在where字句中搜索列中的指定模式
//语法:select * from table_name where 某列名 like 按照哪种模式
})
}
};
var dataRes="";
function $(idName){
return document.getElementById(idName);
}
</script>
</body>
</html>
上一篇:在Apache上部署Django


下一篇:JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)