前几天看到一个小姐姐问我一个添加修改的我看了一下案例弄了一个出来。。。。

参考案例：HTML5本地数据库(WebSQL)[转] - 狂流 - 博客园  https://www.cnblogs.com/kuangliu/p/4772683.html

增删查改的基本操作：H5-WebSQL的增删改查（Demo） - 壹言——越过山丘 才发现无人等候 - CSDN博客  https://blog.csdn.net/vcx08/article/details/81942348

下面是我的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="websql.aspx.cs" Inherits="websql" %>

<!DOCTYPE>

<html>

<head>

<!--<script src="http://172.30.204.23:8080/iis/js/jquery/jquery.js" type="text/javascript"></script>-->

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <!--加入JS的一个框架 -->

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

<!--表格样式-->

<style type="text/css">

/*.table,table tr th, table tr td { border:1px solid #0094ff; }*/

#tab1 th, td,tr {

border:1px solid #4cff00;

}

.btn { display: inline-flex;

justify-content: center;

align-items: center;

text-decoration: none; /*for <a> link*/

margin: 2px; border:

1px solid transparent;

border-radius: 4px; padding: .5em 1em;

color: #fff; background-color: #ff0000;

}

.ubtn { display: inline-flex;

justify-content: center;

align-items: center;

text-decoration: none; /*for <a> link*/

margin: 2px; border:

1px solid transparent;

border-radius: 4px; padding: .5em 1em;

color: #fff; background-color: #49ff00;

}

</style>

<script type="text/javascript">

function initDatabase() {

var db = getCurrentDb();//初始化数据库

if (!db) {

alert("您的浏览器不支持HTML5本地数据库"); return;

}

db.transaction(function (trans) {//启动一个事务，并设置回调函数

//执行创建表的Sql脚本

trans.executeSql("create table if not exists Demo(id int primary key,uName text null,title text null,types text null)", [],

function (trans, result) {

},

function (trans, message) {//消息的回调函数

alert(message);

});

});

}

//随机数

function RndNum(n) {

var rnd = "";

for (var i = 0; i < n; i++)

rnd += Math.floor(Math.random() * 10);

return rnd;

}

//添加

$(function () {

//alert(111);

initDatabase();

$("#btnSave").click(function () {

var txtName = $("#txtName").val();

var txtTitle = $("#txtTitle").val();

//var txtTypes = $("#txtTypes").val();

var txtTypes = $("#sel option:selected").val();

var db = getCurrentDb();

var myDate = new Date();

var num = "";

num += myDate.getYear();

num += myDate.getMonth();

num += myDate.getDate();

num += RndNum(4);

//执行sql脚本，插入数据

if (txtTypes == "1") {

alert("请选择类型！");

} else {

db.transaction(function (trans) {

trans.executeSql("insert into Demo(id,uName,title,types) values(?,?,?,?) ", [num,txtName, txtTitle, txtTypes], function (ts, data) {

}, function (ts, message) {

alert(message);

});

});

showAllTheData();

}

});

});

function getCurrentDb() {

//打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小

//如果数据库不存在那么创建之

var db = openDatabase("myDb", "1.0", "it's to save demo data!", 2*1024 * 1024);;

return db;

}

//显示所有数据库中的数据到页面上去

function showAllTheData() {

//$("#tblData").empty();

$("#tab1").empty();

var db = getCurrentDb();

db.transaction(function (trans) {

trans.executeSql("select * from Demo ", [], function (ts, data) {

if (data) {

var txtName = data.uName;

var txtTitle = data.title;

var types = data.types;

var strHtml = "";

var dv = document.getElementById("dv");

var reslut = "<table id='tab1'>";

reslut += "<tr><th>id</th><th>姓名</th><th>标题</th><th>类型</th><th>操作</th></tr>";

for (var i = 0; i < data.rows.length; i++) {

//var row = data[i];

// msg = msg + "<tr> <td><input type=\"button\" class=\"btn btn-danger\" name=\"" + results.rows.item(i).id + "\" value=\"delete\" onclick=\"tests(this.name)\"></td></tr> ";

reslut += "<tr><td>" + data.rows.item(i)['id'] + "</td><td>" + data.rows.item(i)['uName'] + "</td><td>" + data.rows.item(i)['title'] + "</td><td>" + data.rows.item(i)['types'] +

"</td><td><input type=\"button\" class=\"btn \" name=\"" + data.rows.item(i)['id'] + "\" value=\"delete\" onclick=\"tests(this.name)\"><input type=\"button\" value=\"update\" class=\"ubtn\" id=\"" + data.rows.item(i)['id'] + "\" name=\"" + data.rows.item(i)['id'] + "\" onclick=\"utests(this.name)\"/></td></tr>";

//<td>" + (i + 1) + "</td>

//appendDataToTable(data.rows.item(i));//获取某行数据的json对象

dv.innerHTML = reslut;

}

}

}, function (ts, message) { alert(message); var tst = message; });

});

}

function appendDataToTable(data) {//将数据展示到表格里面

//uName,title,words

var txtName = data.uName;

var txtTitle = data.title;

var types = data.types;

var strHtml = "";

var dv = document.getElementById("dv");

var data = "<table id='tab1'>";

data += "<tr><th>姓名</th><th>标题</th><th>类型</th></tr>";

data += "<tr><td>" + txtName + "</td><td>" + txtTitle + "</td><td>" + types + "</td></tr>";

//dv.innerHTML = data;

//$("#dv").append(data);;

// strHtml += "<tr><th>姓名</th><th>标题</th><th>类型</th></tr>";

/*strHtml += "<tr>";

strHtml += "<th>";

strHtml += "<td>" + txtName + "</td>";

strHtml += "<td>" + txtTitle + "</td>";

strHtml += "<td>" + types + "</td>";

strHtml += "</th>";

strHtml += "</tr>";

$("#tblData").append(strHtml);*/

//tblData.innerHTML = strHtml;

}

//执行事务

function sqlExcute(sql, message) {

var db = getCurrentDb();

db.transaction(

function (trans) {

trans.executeSql(

sql,

[],

function () {//success

alert(message);

},

function (trans, ex) { alert(ex.message) }

);

},

function () { alert("事务执行失败，建议使用谷歌浏览器") },

function () {//success

}

);

};

//删除数据

function tests(mes) {

//alert(mes);

if (confirm("是否删除此用户？id为:" + mes) == true) {

del(mes);

}

showAllTheData();

//showUserInfo();

};

function del(id) {

// var db = getCurrentDb();

//db.transaction(function (trans){

//trans.executeSql("delete * from Demo where uNmae='a'");

var sql = "delete from Demo where id = " + id + "";

sqlExcute(sql, "成功删除信息！");

// });

}

//修改数据

function utests(mes) {

//alert(mes);

//showUserInfo();

var uptable = document.getElementById("tab1");

for (var i = 0; i < uptable.rows.length; i++) {

//alert(uptable.rows[i].cells[1].getAttribute("contentEditable"));

if (mes == uptable.rows[i].cells[0].innerHTML) {

//alert(uptable.rows[i].cells[1].getAttribute("contentEditable"));

//uptable.rows[i].cells[1].focus();

if (uptable.rows[i].cells[1].getAttribute("contentEditable") == null) {

uptable.rows[i].cells[1].setAttribute("contentEditable", "true");

uptable.rows[i].cells[2].setAttribute("contentEditable", "true");

document.getElementById(mes).setAttribute("class", "ubtn");

document.getElementById(mes).setAttribute("value", "save");

uptable.rows[i].cells[1].focus();

}

else {

//alert("ddd");

var sql = "update Demo set uName='" + uptable.rows[i].cells[1].innerHTML + "',title='" + uptable.rows[i].cells[2].innerHTML + "' where id = " + mes + "";

sqlExcute(sql, "成功修改账号信息！");

showAllTheData();

}

}

}

//showUserInfo();

};

</script>

</head>

<body>

<h1 style="font-size:50px;color:#00ffa1">websql操作</h1>

<div style="width:350px; border:1px solid #4cff00">

<tr>

<td>用户名：</td>

<td><input type="text" name="txtName" id="txtName" required/></td>

</tr><br />

<tr>

<td>标&nbsp;&nbsp;&nbsp;题：</td>

<td><input type="text" name="txtTitle" id="txtTitle" required/></td>

</tr><br />

<tr>

<td>分&nbsp;&nbsp;&nbsp;类：</td>

<!--<td><input type="text" name="txtTypes" id="txtTypes" required/></td>-->

<td>

<select id="sel" name="sel" style="width:150px;height:20px; margin-top:20px" >

<option value ="1">--请选择--</option>

<option value ="水果">水果</option>

<option value ="蔬菜">蔬菜</option>

<option value="豆类">豆类</option>

<option value="大米">大米</option>

</select>

</td>

</tr><br />

<input type="button" value="添加" id="btnSave"/>

</div>

<hr style="width:350px; color:#b200ff;float:left"/><br />

<input type="button" value="全部数据" onclick="showAllTheData();"/>

<div id="dv">

<table id="tblData"></table>

</div>

<!--<table id="tblData" border="1" style="width=50%">

</table>-->

</body>

</html>

运行效果图：

f12  浏览器 查看 数据库：

哈哈  写得不好，如有什么错误，请留言告知。

本地浏览器Websql数据库操作的更多相关文章

  1. H5操作WebSQL数据库

    HTML代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  2. 【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  3. html5 浏览器端数据库

    为什么使用浏览器端数据库:随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 一.localStorage  — 本地存储  可 ...

  4. web本地存储-WebSQL

    Web SQL数据库API实际上未包含在HTML 5规范之中,它是一个独立的规范,它引入了一套使用SQL操作客户端数据库的API.W3C 官方在 2011 年 11 月声明已经不再维护 Web SQL ...

  5. ajax调用WebService实现数据库操作

    首先说下测试环境和思路: 前端收集数据转换成json格式传输到后端,处理并存入数据库 1.数据库操作: [WebMethod] public string InsertPoint(string dat ...

  6. ASP.NET实现二维码 ASP.Net上传文件 SQL基础语法 C# 动态创建数据库三（MySQL） Net Core 实现谷歌翻译ApI 免费版 C#发布和调试WebService ajax调用WebService实现数据库操作 C# 实体类转json数据过滤掉字段为null的字段

    ASP.NET实现二维码 using System;using System.Collections.Generic;using System.Drawing;using System.Linq;us ...

  7. HTML 5浏览器端数据库

    HTML 5浏览器端数据库为什么要使用浏览器端数据库:随着浏览器处理能力的增强,越来越多的双喜鸟网站开始考虑在客户端存储大量的数据,这可以减少用户从服务器获取数据的等待时间. 1.本地存储-本地存储可 ...

  8. js IndexedDB：浏览器端数据库的demo实例

    IndexedDB具有以下特点. (1)键值对储存. IndexedDB内部采用对象仓库(object store)存放数据.所有类型的数据都可以直接存入,包括JavaScript对象.在对象仓库中, ...

  9. Python Paramiko模块与MySQL数据库操作

    Paramiko模块批量管理:通过调用ssh协议进行远程机器的批量命令执行. 要使用paramiko模块那就必须先安装这个第三方模块,仅需要在本地上安装相应的软件(python以及PyCrypto), ...

随机推荐

  1. ASP.NET Core学习之五 EntityFrameworkCore

    目的:运用EntityFrameworkCore ,使用codefirst开发 一.创建web项目 创建一个不进行身份验证的   ASP.NET Core Web Application (.NET ...

  2. Lua的内存管理

    [前言] 在历史长河中,各种各样的新语言,总是伴随着我们编程人员:有的时候,工作的需要,我们不得不去学习这些很炫的,很新的语言.学习任何一门语言(我这里只说学习),都无非就是学习那么几个大模块,基本语 ...

  3. XAMPP环境下配置Phalcon框架

    目前环境:win7  xampp 从phalcon 官网下载如下包:https://phalconphp.com/en/download/windows phalcon_x86_vc11_php5.6 ...

  4. css杂项补充

    css杂项补充 一.块与内联 1.块 独行显示 支持宽高,宽度默认适应父级,高度默认由子级或内容撑开 设置宽高后,采用设置的宽高 2.内联 同行显示 不支持宽高 margin上下无效果,左右会起作用, ...

  5. HTTP/1.1 请求方法

      HTTP(Hypertext Transfer Protocol,超文本传输协议)是一种用于分布式.协作式和超媒体信息系统的 应用层协议.HTTP 是万维网的数据通信的基础.默认端口为 80.   ...

  6. xml文件sql中大于号、小于号、等号的转义问题

    1.用小于或小于等于的场景 代码1: <delete id="delOvertimeLog" parameterType="java.lang.Integer&qu ...

  7. vue项目移植tinymce踩坑

    转载:https://segmentfault.com/a/1190000012791569?utm_source=tag-newest 2019-2-18 貌似这篇文章帮了大家一些小忙最近tinym ...

  8. 剑指offer数组3

    面试题11:旋转数组的最小数字 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2 ...

  9. 关于postman各功能的说明及用法以及批量执行

    这玩意功能还不错,可以学学,在测试接口或者配合写代码测接口时是有帮助作用的.今天也去打听了一下,一下我就做了一下记录. 首先,主界面: 分开记录,写的详细一些. 左侧菜单栏: 主菜单(请求部分); 输 ...

  10. 15，EasyNetQ-高级API

    EasyNetQ的使命是为基于RabbitMQ的消息传递提供最简单的API. 核心IBus接口有意避免公开AMQP概念,如交换,绑定和队列,而是实现基于消息类型的默认交换绑定队列拓扑. 对于某些场景, ...