<!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.οnlοad=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").οnclick=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").οnclick=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").οnclick=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").οnclick=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>

转载于:https://www.cnblogs.com/e-degree/p/6386076.html

通过web sql实现增删查改相关推荐

  1. MySQL表sql语句增删查改_学会这些操作你就不会栓Q(狗头)

    目录 本章目标 CRUD 新增(Create) 单行数据,全列插入 多行插入,指定列插入 查询(Retrieve) 修改(Update) 删除(Delete) 本章目标 学会MySQL表中的sql语句 ...

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

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

  3. (4) hibernate增删查改+批量操作+类似Mybatis动态sql

    简介 采用spring + hibernate + freemaker+ maven搭建起来的一个hibernate增删查改和 类似mybatis动态sql查询的一个案例 增删查改demo + 动态s ...

  4. 初学jsp课，一个基于jsp+javabean+servlet+sql server小型房源网站，实现了用户表，房源表，及留言板的增删查改。使用deamwear编译器

    1 设计目的 <Web应用开发课程设计>是实践性教学环节之一,是<Web程序设计>课程的辅助教学课程.通过课程设计,使学生掌握Web网站的基本概念,结合实际的操作和设计,巩固课 ...

  5. SQL Server之 (四) ADO增删查改 登录demo 带参数的sql语句 插入自动返回行号

    SQL Server之 (四) ADO增删查改  登录demo  带参数的sql语句  插入自动返回行号 自己学习笔记,转载请注明出处,谢谢!---酸菜 1.什么是ADO.NET ADO.NET是一组 ...

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

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

  7. server sql 中类型为bit应该插入什么值_关于SQL Server中bit类型字段增删查改的一些事...

    前言 本文主要给大家介绍了关于SQL Server中bit类型字段增删查改的一些事,话说BIT类型字段之前,先看"诡异"的一幕,执行Update成功,但是查询出来的结果依然是1,而 ...

  8. django mysql开发_基于django框架web项目实战开发四 django+mysql实现增删查改功能

    第一步:编写增删查改功能代码 打开项目myweb目录下view.py, 并编写以下代码 view.py from django.shortcuts import render, redirect fr ...

  9. 支持增删查改的简单Java Web通讯录详细教程【基于Mac OS+IDEA+Servlet+JDBC+Tomcat】

    本文将以Web版通讯录的形式介绍一个支持简单增删查改的Java Web项目,软硬件环境基于Macbook Air M2+macOS Ventura 13.1+IntelliJ IDEA 2022,技术 ...

最新文章

  1. 柱状图、堆叠柱状图、瀑布图有什么区别？怎样用Python绘制？（附代码）
  2. html5 video css样式修改,htmlvideo标签用法
  3. redis php操作日志,php-redis笔记
  4. python自动化办公选择题_python自动化开发-[第一天]-练习题
  5. 软件工程第一次作业补充
  6. StringFarmat控制字符串居中显示
  7. 使用Mockito和BeanPostProcessors在Spring注入测试双打
  8. php在线读取pdf文件大小_PDF转WORD在线转换器哪家强？
  9. xampp php5.6 7.1共存,New XAMPP with PHP 7.2.8, 7.1.20, 7.0.31 5.6.37
  10. 实现isnum函数python_python 学习 实现isOdd函数 实现isNum()函数 实现multi() 实现isPrime() 格式化输出日期DAY16...
  11. Leetcode 22. 括号生成（递归+去重）
  12. [置顶] 原来JAVA对象转JSON格式的字符串如此简单,返回来暂时不会做,留下纪念下
  13. Meterpreter命令详解
  14. 快点射！(Swift Injection) 不带这样的!
  15. 0基础如何自学软件编程开发
  16. 网络协议 18 - CDN
  17. 解决win10启动夜神模拟器就蓝屏重启的问题
  18. 用统信uos安装docker并运行项目
  19. vivado中Cordic IP核使用——计算正余弦（sin/cos）
  20. 禁用和启用input元素

热门文章

  1. SEO查询指令,非常值得你收藏！
  2. 2021年中国工业互联网安全大赛核能行业赛道writeup之数据库登录
  3. java 抛异常给上级_java异常处理机制(示例代码)
  4. 如果成为一名高级安卓开发_什么是高级开发人员，我如何成为一名开发人员？
  5. 快速 开发平台 架构_快速介绍清洁架构
  6. Hadoop集群的基本操作（二：HBase的基本操作）
  7. 弄懂“进程”(下)：进程的控制、同步和通信
  8. 反向代理服务器的工作原理
  9. winform 弹出窗体位置设定
  10. 重磅！MaxCompute助力阿里开源自研语音识别模型DFSMN，准确率高达96.04%