<!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. iOS开发——NSArray中的字典排序

    手头上碰到一个项目,需要给数组中的字典中的一个字段排序,想了想,干脆再字典中增加一个字段,用来记录需要排序字段的第一个字符,用它来作为比较的对象,进行排序. - (void)viewDidLoad { ...

  2. UISegmentedControl——分段控件

    分段控件,提供了一组按钮,但是只能激活一个.通过UIControlEventValueChanged事件实现与用户的交互,并通过selectedSegmentIndex判断当前选定的控件,通过titl ...

  3. 超全！整理常用的iOS第三方资源

    一:第三方插件 1:基于响应式编程思想的oc 地址:https://github.com/ReactiveCocoa/ReactiveCocoa 2:hud提示框 地址:https://github. ...

  4. ubuntu12.04+fuerte 下跑通lsd-slam——数据集

    lsd-slam(下载链接:https://github.com/tum-vision/lsd_slam)提供了两种方法,一种是用数据集(下载地址http://vision.in.tum.de/lsd ...

  5. js数组之迭代方法

      ES5为数组对象定义了5个迭代方法(即递归,简单的说就是自己可以调用自己). 每个方法接收两个参数:要在每一项上运行的函数(接收3个参数:数组项的值,该项在数组中的位置,数组对象本身)和(可选的) ...

  6. pyv8安装

    http://www.thinksaas.cn/topics/0/400/400915.html

  7. struts配置文件和国际化

    一.加载包struts2-core-2.3.24.1.jar struts-default.xml :各种栈 org.apache.struts2 -->> default.propert ...

  8. [HNOI2004]Language L语言

    2777: [HNOI2004]Language L语言 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 10  Solved: 5[Submit][S ...

  9. 使用Linux自定义自动补全命令完善自己的shell脚本

    对于Linuxer来说,自动补全是再熟悉不过的一个功能了.当你在命令行敲下部分的命令时,肯定会本能地按下Tab键补全完整的命令,当然除了命令补全之外,还有文件名补全. Bash-completion ...

  10. Grunt那些事

    1.第一步当然是先安装好nodejs里面的npm包管理器咯,若还不知道怎么安装请参考nodejs那些事里面的安装步骤 2.node安装完后,就安装grunt-CLI,如果nodejs直接安装在系统默认 ...