<!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. 神经网络 Neuroph - Java Neural Network Platform Neuroph

    http://neuroph.sourceforge.net/image_recognition.html https://github.com/neuroph/neuroph

  2. (中等) POJ 2948 Martian Mining，DP。

    Description The NASA Space Center, Houston, is less than 200 miles from San Antonio, Texas (the site ...

  3. [转载]七天学会NodeJS

    链接:http://nqdeng.github.io/7-days-nodejs/ NodeJS基础 什么是NodeJS JS是脚本语言,脚本语言都需要一个解析器才能运行.对于写在HTML页面里的JS ...

  4. 将UTF8编码转化为中文 － NSString方法

    方法一: 代码如下,如有更好的方法 麻烦贴出来,这个方法是通过webview进行解码的 UIWebView *web = [[UIWebView alloc] init]; NSString *tsw ...

  5. bootstrap switch功能

    bootstrap switch是一个按钮开关,点击时获取其状态可通过以下代码: <input id="email_switch_state" type="chec ...

  6. doxygen 生成源码文档

    使用doxygen 生成源代码的文档是相当方便的,本文就简单整理下doxygen的使用说明 1. 安装 关于安装的问题不做特殊的说明,这里直接使用命令安装, 源码安装不做介绍 ubuntu: sudo ...

  7. LPC2478的外部中断使用

    LPC2478外部中断 2478的外部中断模型如下 也就是说,port0和2支持外部中断,EINT0-2是三个独立管脚的中断,而EINT3则是port0和2的所有中断共同拥有的向量 对于port0和2 ...

  8. IOS开发中Xcode常用插件安装与管理（转）

    XCode中插件管理工具:Alcatraz    转自http://www.cocoachina.com/industry/20140506/8325.html 苹果现在的成绩得益于其始终如一的坚持. ...

  9. ubuntu内核的编译安装

    原创声明:转载请注明出处. 一.操作环境: 1.ubuntu版本 2.linux原有内核版本 3.要安装的linux内核版本 linux-3.16.39 二.新内核的编译和安装 1.首先下载linux ...

  10. 创建TabBar

    -(void)creatTabBarView { NSArray *imgArray=@[]; NSArray *selectImage=@[]; NSArray *names=@[]; for (i ...