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

通过web sql实现增删查改的更多相关文章

  1. 常用SQL语句（增删查改、合并统计、模糊搜索）

    转自:http://www.cnblogs.com/ljianhui/archive/2012/08/13/2695906.html 常用SQL语句 首行当然是最基本的增删查改啦,其中最重要的是查. ...

  2. Sql Server的艺术（一） 视图的增删查改

    视图是从一个或者多个表中查询数据的另一种方式.利用视图可以集中.简化定制数据库,同时还能保障安全. 视图其结构和数据是建立在对应的查询基础上的.和表一样,视图也是包括几个被定义的数据列和多个数据行,但 ...

  3. SQL Server 表的管理_关于数据增删查改的操作的详解（案例代码）

    SQL Server 表的管理_关于数据增删查改的操作的详解(案例代码)-DML 1.SQL INSERT INTO 语句(在表中插入) INSERT INTO 语句用于向表中插入新记录. SQL I ...

  4. SQL Server 表的管理_关于表的操作增删查改的操作的详解（案例代码）

    SQL Server 表的管理_关于表的操作增删查改的操作的详解(案例代码) 概述: 表由行和列组成,每个表都必须有个表名. SQL CREATE TABLE 语法 CREATE TABLE tabl ...

  5. EF各版本增删查改及执行Sql语句

    自从我开始使用Visual Studio 也已经经历了好几个版本了,而且这中间EF等框架的改变也算是比较多的.本篇文章记录下各个版本EF执行Sql语句和直接进行增删查改操作的区别,方便自己随时切换版本 ...

  6. EF增删查改加执行存储过程和sql语句，多种方法汇总

    ActionUrl c = new ActionUrl() { ActionName="test", RequestUrl="/123/123", SubTim ...

  7. JDBC终章- 使用 DBUtils实现增删查改- C3P0Utils数据源/QueryRunner runner连接数据源并执行sql

    JDBC终章- 使用 DBUtils实现增删查改 1.数据库结构 Create Table CREATE TABLE `user` ( `id` ) NOT NULL AUTO_INCREMENT, ...

  8. 4.在MVC中使用仓储模式进行增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-using-the-repository-pattern-in-mvc/ 系列目录: ...

  9. EasyUI的增删查改(后台ASP.NET)

    转自:http://www.cnblogs.com/dedeyi/archive/2013/04/22/3035057.html 某某人曾经跟我说,你们做系统不就是增删查改吗. 是啊,很多时候我们就是 ...

随机推荐

  1. jsoncpp第二篇------API

    更多API参考jsoncpp头文件 1  jsoncpp的api简要说明 1,解析(json字符串转为对象) std::string strDataJson; Json::Reader JReader ...

  2. 贪心法基础题目 HDU

    贪心算法的基本步骤: 1.从问题的某个初始解出发.2.采用循环语句,当可以向求解目标前进一步时,就根据局部最优策略,得到一个部分解,缩小问题的范围或规模.3.将所有部分解综合起来,得到问题的最终解. ...

  3. C# GridView Edit & Delete, 点击Delete的时候弹出确认框

    1. 使用GridView自带属性ShowEditButton和ShowDeleteButton,均设为True  <Columns> ... <asp:CommandField S ...

  4. 【转】14个最佳的HTML/CSS设计和开发框架

    专业的网页设计是既复杂又耗时的.它需要HTML和CSS框架的完美结合.这些框架不仅可以为设计方案增加特定的功能,还可以大大地节省时间和精力. 高效的框架不仅是网站设计的基础,它提供的各种丰富多彩的功能 ...

  5. Unity3D ——强大的跨平台3D游戏开发工具（一）

    众所周知,Unity3D是一个能够实现轻松创作的多平台的游戏开发工具,是一个全面整合的专业游戏引擎.在现有的版本中,其强大的游戏制作功能已 经达到让人瞠目结舌的地步.尤其是它在3.0版本里面制作的那款 ...

  6. 配置tomcat及如何自动编译jsp文件

    1.myeclipse如何关联tomcat? 四个注意点...  必须一致! 2.别人修改过jsp不用重启服务器,我的却要每次重启服务器,网上找了很多方法都没有用,很是郁闷...最后发现了原来是bui ...

  7. [Angular Tutorial] 0-Bootstraping

    在这一节的tutorial中,您将会逐渐熟悉AngularJS phonecat app的最重要的源代码文件.您也将学到如何将开发服务器与angular-seed绑定到一起,并且在浏览器中运行应用. ...

  8. 动态创建Fastreport（delphi）

    动态创建Fastreport分以下几个步骤: 1.首先清空Fastreport,定义全局变量,并加载数据集    frReport.Clear;    frReport.DataSets.Add(fr ...

  9. Rest Project Performace Pressure Test

    首次调整基线和配置修改 机器配置为 CPU: Intel(R) Xeon(R) CPU E5-2630 v2 @ 2.6GHz 24core 内存: 128G JDK Ver: 1.7.0_80 To ...

  10. JAVA语言中冒号的用法

    近来由于本人要介入android平台的开发,所以就买了本JAVA语言的书学习.学习一段时间来,我的感觉是谭浩强就是厉害,编写的<C编程语言>系列丛书不愧是经典.书中对C语言的介绍既系统又全 ...