<!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. DNS相关配置文件

    我们晓得主机名对应到 IP 有两种方法,早期的方法是直接写在档案里面来对应, 后来比较新的方法则是透过 DNS 架构!那么这两种方法分别使用什么配置文件?可不可以同时存在? 若同时存在时,那个方法优先 ...

  2. 25个Linux性能监控工具

    一段时间以来,我们在网上向读者介绍了如何为Linux以及类Linux操作系统配置多种不同的性能监控工具.在这篇文章中我们将罗列一系列使用最频繁的性能监控工具,并对介绍到的每一个工具提供了相应的简介链接 ...

  3. 用HTML 格式导出Excel

    只需按照如下格式写就可,在<head> 里面嵌套table,必须修改html的命名空间,加上一些描述.保存为xls文件 <html xmlns:x="urn:schemas ...

  4. Handler和Message以及Looper之间的三角关系

    说到Handler想必大家都经常用到,在非UI线程更新UI那可是利器,用起来也非常容易上手 从使用上来说,我们只需要关注sendMessage和handleMessage即可 所以我们先从Handle ...

  5. javascript--study

    1.函数传参:按值传递 对于数字.字符串等是将它们的值传递给了函数参数,函数参数的改变不会影响函数外部的变量. 对于数组和对象等是将对象(数组)的变量的值传递给了函数参数,这个变量保存的指向对象(数组 ...

  6. 微信小程序之----底部菜单action-sheet

    action-sheet action-sheet是从底部弹出的选择菜单,子菜单通过action-sheet-item和action-sheet-cancel指定,action-sheet-item是 ...

  7. 【转】安卓Fragment不完全介绍

    转两篇博客: 1.http://blog.csdn.net/lmj623565791/article/details/37970961 2.http://blog.csdn.net/lmj623565 ...

  8. Django form模块使用心得

    最近用Django 写了一个网站,现在来分享一下对Django form 的一些心得. 一,创建一个表单 创建一个Form表单有两种方式: 第一种方式是继承于forms.Form,的一个子类,通过在f ...

  9. java求两个集合的差集

    public static void main(String[] args) {Set set = new HashSet();Set set1 = new HashSet();set.add(&qu ...

  10. java监听事件

    2014年2月23日 09:51:54 成功添加了打开官网的事件, 回头研究下,那个打开url的类 java的System.getProperty()方法可以获取的值 ################ ...