<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>WebSql Demo</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" rel='nofollow' onclick='return false;'></a>
<h1 class="mui-title">WebSql Demo</h1>
</header>
<div class="mui-content">
<div class = sql_statement>
<label>SQL: </label>
<button id="ExeSql" class='mui-btn'> 执行</button>
<div class="mui-input-row" style="margin: 10px 5px;">
<textarea id="sql" rows="3" placeholder="输入SQL，然后点击执行"></textarea>
</div>
</div>
<div class = sql_statement>
<label>实例: </label>
<div class="tableitem">
<button id="addtable" class='mui-btn horiz-item'> 建表</button>
<button id="add" class='mui-btn horiz-item'> 添加</button>
<button id="delete" class='mui-btn horiz-item'> 删除</button>
<button id="modify" class='mui-btn horiz-item'> 修改</button>
<button id="query" class='mui-btn horiz-item'> 查询</button>
</div>
</div>
<div>
<label>查询结果: </label>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="tableitem">
<p class="country">国家</p>
<p class="city">城市</p>
</div>
</li>
</ul>
<ul class="mui-table-view" id="db_content">
</ul>
</div>
</div>
<link href="css/websql.css" rel="stylesheet"/>
<script src="js/websql.js"></script>
<script>
mui.plusReady(function(){
CreateDataBase('MyDB');
CreateTable('Citys')
document.getElementById("ExeSql").addEventListener('tap', function(){
ExeSql(getSql(), [], function(tx, results){
clearTable();
var len = results.rows.length, i;
console.log('results len is '+len)
for (i = 0; i < len; i++){
var item = results.rows.item(i);
addTableItem(item.country, item.city);
console.log("results " + item.id)
}
})
})
document.getElementById("addtable").addEventListener('tap', function(){
document.getElementById("sql").value = 'CREATE TABLE IF NOT EXISTS CITYS (id integer primary key autoincrement, country text, city text)'
})
document.getElementById("add").addEventListener('tap', function(){
document.getElementById("sql").value = 'INSERT INTO CITYS (country, city) VALUES ("中国", "北京")'
})
document.getElementById("delete").addEventListener('tap', function(){
document.getElementById("sql").value = 'drop table citys'
})
document.getElementById("modify").addEventListener('tap', function(){
document.getElementById("sql").value = 'update citys set city="上海" where country="中国"'
})
document.getElementById("query").addEventListener('tap', function(){
document.getElementById("sql").value = "select * from Citys"
})
})
function getSql(){
return document.getElementById("sql").value;
}
function addTableItem(country, city){
var table = document.getElementById('db_content');
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
var div = document.createElement('div');
div.className = 'tableitem'
var p1 = document.createElement('p');
var p2 = document.createElement('p');
p1.className = 'country';
p2.className = 'city';
div.appendChild(p1);
div.appendChild(p2);
li.appendChild(div);
table.appendChild(li);
p1.innerHTML = country
p2.innerHTML = city
}
function clearTable(){
var table = document.getElementById('db_content');
while(table.firstChild){
table.removeChild(table.firstChild);
}
}
</script>
</body>
</html>
WebSql 学习实例
- p6_980983了解作者
- 111.6KB文件大小
- zip文件格式
- 0收藏次数
- VIP专享资源类型
- 0下载次数
- 2022-05-27 08:16上传日期
WebSql 学习实例
WebSql.zip
WebSql- manifest.json9KB
- .project1.1KB
- index.html426B
- websql.html4.1KB
- js
- mui.js186.5KB
- mui.min.js93.5KB
- websql.js786B
- fonts
- mui.ttf27.6KB
- css
- websql.css394B
- mui.min.css63KB
- mui.css80.6KB
内容介绍
评论
相关推荐
- sqlsql 在edX上参加IBM数据科学SQL课程时编译了一些ipython笔记本和sql脚本（ ）
- sqlsql主要sql来自： :
- SQL MonitorSQL Monitor 是一款界面简洁、绿色小巧的sql活动监视器，它能够帮助用户对 SQL Server 运行进程和Job进行实时监视，您可以查看当前执行的SQL/命令并终止。
- SQL 语言SQL语言基础 SQL语法介绍 ppt
- sql search非常好用的sql server 搜索工具。sql search sql search
- Sql PromptSQLPromptBundle.zip 中的sqlprompt3setup.exe 为安装文件。 压缩包解压开之后，执行Initialize.bat即可。
- sqlexplorersql2000数据加密查看工具sql2000数据加密查看工具sql2000数据加密查看工具sql2000数据加密查看工具
- sql sql sqlsql学习 sql sql sql sql sql sql sql
- ConnectSQLVC连接SQL VC连接SQL VC连接SQL VC连接SQL VC连接SQL VC连接SQL VC连接SQL VC连接SQL
- SQL学习关于SQL一些的资料总结,我也是从网上找的 谢谢了 是TXT格式的