websql在mui中实现本地存储

原创

mb61cd3856e93bf 2022-01-11 17:40:43 博主文章分类：html ©著作权

文章标签 html ico css 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者mb61cd3856e93bf的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>新沂市实验学校</title>
    <meta name="viewport" content="width=device-width, initial-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">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../css/mui.min.css">
  <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css"/>
    <style>

      .title{
        margin: 0px 1px 1px;
        color: #6d6d72;
        font-size: 15px;
      }

      .oa-contact-cell.mui-table .mui-table-cell {
        padding: 11px 0;
        vertical-align: middle;
      }

      .oa-contact-cell {
        position: relative;
        margin: -11px 0;
      }

      .oa-contact-avatar {
        width: 75px;
      }
      .oa-contact-avatar img {
        border-radius: 50%;
      }
      .oa-contact-content {
        width: 100%;
      }
      .oa-contact-name {
        margin-right: 20px;
      }
      .oa-contact-name, oa-contact-position {
        float: left;
      }
    </style>

  <script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
   <script type="text/javascript">

       function initDatabase() {//初始化数据库
           var db = getCurrentDb();
           if(!db) {
               alert("您的浏览器不支持HTML5");
               return;
           }


           db.transaction(function (trans) {
               trans.executeSql("create table if not exists Demo(uName text null,Banji text null,title text null,words text null)", [], function (trans, result) {//添加1

               }, function (trans, message) {
                   alert(message);
               });
           }, function (trans, result) {
           }, function (trans, message) {
           });
       }

       $(function () {

           initDatabase();

           $("#btnSave").click(function () {
               var txtName = $("#txtName").val();//添加2
          var txtBanji = $("#txtBanji").val();
               var txtTitle = $("#txtTitle").val();
               var txtWords = $("#txtWords").val();

               var db = getCurrentDb();

               //插入数据
               db.transaction(function (trans) {

                   trans.executeSql("insert into Demo(uName,Banji,title,words) values(?,?,?,?) ", [txtName, txtBanji, txtTitle, txtWords], function (ts, data) {//添加2

                   }, function (ts, message) {
                       alert(message);
                   });

               });
               showAllTheData();

           });
       });

       function getCurrentDb() {
           //打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
           var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024); ;
           return db;

       }

       function showAllTheData() {
           $("#tblData").empty();
           var db = getCurrentDb();

           db.transaction(function (trans) {
               trans.executeSql("select * from Demo ", [], function (ts, data) {
                   if (data) {
                       for (var i = 0; i < data.rows.length; i++) {
                           appendDataToTable(data.rows.item(i));//获取某行数据的json对象
                       }
                   }
               }, function (ts, message) {
                   alert(message);
                   var tst = message;
               });

           });
       }

       function appendDataToTable(data) {//将数据展示到表格里面
           //uName,Banji,title,words    //添加1
           var txtName = data.uName;//添加2
         var txtBanji = data.Banji;
           var txtTitle = data.title;
           var words = data.words;

           var strHtml = "";
           strHtml += "<tr>";
           strHtml += "<td>"+txtName+"</td>";//添加1
        strHtml += "<td>"+txtBanji+"</td>";
           strHtml += "<td>" + txtTitle + "</td>";
           strHtml += "<td>" + words + "</td>";
           strHtml += "</tr>";
           $("#tblData").append(strHtml);
       }

   </script>  
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">巡课管理</h1>
    </header>
    <nav class="mui-bar mui-bar-tab">
      <a class="mui-tab-item mui-active" href="#tabbar">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">巡课管理</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon-email"></span>
        <span class="mui-tab-label">巡课反馈</span>
      </a>
      <!-- <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">通讯录</span>
      </a>-->
      <!-- <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">我的</span>
      </a> -->
    </nav>
    <div class="mui-content">


       <div id="tabbar" class="mui-control-content mui-active">
        <div class="title">

 <table>
            <tr>
                <td>时间：</td>
                <td><input type="text" name="txtName" id="txtName" required/></td>巡查纪律

            </tr>
      <tr>
          <td>班级：</td>
          <td><input type="text" name="txtBanji" id="txtBanji" required/></td>

      </tr>
               <tr>
                <td>教师：</td>
                <td><input type="text" name="txtTitle" id="txtTitle" required/></td>

            </tr>
            <tr>
                <td>评价：</td>
                <td><input type="text" name="txtWords" id="txtWords" required/></td>

            </tr>


        </table>
        <input type="button" value="保存" id="btnSave"/>



        </div>

      </div>
      <div id="tabbar-with-chat" class="mui-control-content">
        <div class="title">
          <hr/>
          <input type="button" value="展示数据" onclick="showAllTheData();"/>
          <table id="tblData">

          </table>
        </div>
      <!--内部行为技术-->


      <!--内部行为技术-->   
      </div>


    </div>
  </body>
  <script src="../js/mui.min.js"></script>

  <script>
    mui.init({
      swipeBack:true ,//启用右滑关闭功能               

    });   

  </script> 

</html>