<!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. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  2. ucos2.86的任务调度漏洞

    Ucos2.86版本有一个任务调度的漏洞,该漏洞在2.88之后的版本已经修改过来了,今天我们来看看这个漏洞, 漏洞在官方2.88的文档中如下 这两个函数都是调度器函数,也就是说调度器有漏洞,但是看官方 ...

  3. 微信小程序之----audio音频播放

    audio audio为音频组件,我们可以轻松的在小程序中播放音频. audio组件属性如下: 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String ...

  4. Jconsole连接远程服务器

    本地服务器.win7,安装JDK8 远程服务器:centos6.5 ,tomcat7,java8 配置方法: 1)修改远程服务器的~/tomcat/bin/catalina.sh  文件 在 # -- ...

  5. java设计模式面试

    设计模式 1. 单例模式:饱汉.饿汉.以及饿汉中的延迟加载,双重检查 2. 工厂模式.装饰者模式.观察者模式. 3. 工厂方法模式的优点(低耦合.高内聚,开放封闭原则) 单例模式 分类:懒汉式单例.饿 ...

  6. java系列--批量处理

    批量删除 批量更新 二.分页 1.基于sql语句 1).基于ROWID分页 2).基于RONUM分页 3).基于数据分析分页 2.基于结果集

  7. Swift 添加到TableView实现动画效果

    let indexPath = NSIndexPath(forRow:0 ,inSection:0) self.tableView.insertRowsAtIndexPaths([indexPath] ...

  8. spark 中的RDD编程 -以下基于Java api

    1.RDD介绍:     RDD,弹性分布式数据集,即分布式的元素集合.在spark中,对所有数据的操作不外乎是创建RDD.转化已有的RDD以及调用RDD操作进行求值.在这一切的背后,Spark会自动 ...

  9. iOS 开发 旧版 framework

    0. 参考 http://www.cocoachina.com/ios/20150127/11022.html http://www.cnblogs.com/gcb999/p/3296414.html ...

  10. PHP实现仿Google分页效果的分页函数

    本文实例讲述了PHP实现仿Google分页效果的分页函数.分享给大家供大家参考.具体如下: /** * 分页函数 * @param int $total 总页数 * @param int $pages ...