WebSql 学习实例

  • p6_980983
    了解作者
  • 111.6KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-27 08:16
    上传日期
WebSql 学习实例
WebSql.zip
  • WebSql
  • manifest.json
    9KB
  • .project
    1.1KB
  • index.html
    426B
  • websql.html
    4.1KB
  • js
  • mui.js
    186.5KB
  • mui.min.js
    93.5KB
  • websql.js
    786B
  • fonts
  • mui.ttf
    27.6KB
  • css
  • websql.css
    394B
  • mui.min.css
    63KB
  • mui.css
    80.6KB
内容介绍
<!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>
评论
    相关推荐
    • sql
      sql 在edX上参加IBM数据科学SQL课程时编译了一些ipython笔记本和sql脚本( )
    • sql
      sql主要sql来自: :
    • SQL Monitor
      SQL Monitor 是一款界面简洁、绿色小巧的sql活动监视器,它能够帮助用户对 SQL Server 运行进程和Job进行实时监视,您可以查看当前执行的SQL/命令并终止。
    • SQL 语言
      SQL语言基础 SQL语法介绍 ppt
    • sql search
      非常好用的sql server 搜索工具。sql search sql search
    • Sql Prompt
      SQLPromptBundle.zip 中的sqlprompt3setup.exe 为安装文件。 压缩包解压开之后,执行Initialize.bat即可。
    • sqlexplorer
      sql2000数据加密查看工具sql2000数据加密查看工具sql2000数据加密查看工具sql2000数据加密查看工具
    • sql sql sql
      sql学习 sql sql sql sql sql sql sql
    • ConnectSQL
      VC连接SQL VC连接SQL VC连接SQL VC连接SQL VC连接SQL VC连接SQL VC连接SQL VC连接SQL
    • SQL学习
      关于SQL一些的资料总结,我也是从网上找的 谢谢了 是TXT格式的