<!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>
时间： 2024-12-20 21:58:25