<!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>