简单实现websql

来源：互联网发布：sql server 2017下载编辑：程序博客网时间：2024/06/05 11:43
以下仅贴出源码，有兴趣的朋友可以看下
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>表格应用</title>        <style>            *{margin: 0;padding: 0;}            #tab{width: 600px;margin: 10px auto;}            #tab td{text-align: center;}            .add{width: 600px;margin: 0 auto;position: relative;}            #btn5{position:absolute;right: 0;top: 0;}            a{text-decoration: none; color: blue;cursor: pointer;}            #tab .trr{width: 200px;height: 35px;}        </style>        <script>            window.onload=function(){                oTab=document.getElementById("tab");                var oldColor="";                var oBtn5=document.getElementById("btn5");                var sname=document.getElementById("sname");                var grade=document.getElementById("grade");                var db = openDatabase("db","1.0","My Database",1024*100);                var dels = "";                //监测浏览器是否支持                if (!db) {                    console.log("数据库创建失败！");                } else {                    console.log("数据库创建成功！");                }                //创建表结构                db.transaction( function(tx) {                    tx.executeSql(                    "create table if not exists db (sno REAL UNIQUE,sname,grade)",                         [],                         function(tx,result){  },                         function(tx, error){ alert('创建stu表失败:' + error.message);                      });                });                getMessage();                oBtn5.onclick=function saveData(){                      var sno = document.getElementById("sno").value;                      var sname = document.getElementById("sname").value;                    var grade = document.getElementById("grade").value;                       console.log(sno,sname,grade);                      addMessage(sno,sname,grade);                    getMessage()                   }                //保存数据                function addMessage(sno,sname,grade) {                    // body...                 //     executeSql函数有四个参数，其意义分别是：                    // 1）表示查询的字符串，使用的SQL语言是SQLite 3.6.19。                    // 2）插入到查询中问号所在处的字符串数据。                    // 3）成功时执行的回调函数。返回两个参数：tx和执行的结果。                    // 4）一个失败时执行的回调函数。返回两个参数：tx和失败的错误信息                     db.transaction(function(tx){                          tx.executeSql("INSERT INTO db(sno,sname,grade) VALUES(?,?,?)",                            [sno,sname,grade],                            function(tx,rs){ alert("添加成功"); },                            function(tx,error){  alert(error.source+"::"+error.message); }                          )                    })                }                //查询数据                function getMessage(){                    db.transaction(function(tx){                        tx.executeSql(                            "SELECT * FROM db",                            [],                            function(tx,rs){                                //渲染数据                                removeAllData()                                for(var i=0;i<rs.rows.length;i++){                                    showMessage(rs.rows[i])                                }                                changeTab();                                closes()                            },                            function(tx,error){                                console.log(tx);                            }                        )                    })                }                //删除数据                function removes(id){                    db.transaction(function(tx){                        tx.executeSql(                            "DELETE FROM db WHERE sno= ?",                            [id],                            function(tx,result){                                alert("删除成功")                                getMessage();                            },                            function(tx,error){                                alert("删除失败"+error.message);                            }                           )                    })                }                // 删除表格原有内容                function removeAllData(){                      for (var i = oTab.childNodes.length - 1; i >= 0;i--){                          oTab.removeChild(oTab.childNodes[i]);                      }                    var thead = document.createElement("thead");                    var tr = document.createElement("tr");                      var th1 = document.createElement("th");                      var th2 = document.createElement("th");                      var th3 = document.createElement("th");                    var th4 = document.createElement("th");                      th1.innerHTML = "姓名";                      th2.innerHTML = "专业";                    th3.innerHTML = "年级";                    th4.innerHTML = "操作";                      tr.appendChild(th1);                      tr.appendChild(th2);                      tr.appendChild(th3);                    tr.appendChild(th4);                    thead.appendChild(tr);                    var tbody = document.createElement("tbody");                    oTab.appendChild(thead);                    oTab.appendChild(tbody);                  }                function showMessage(mes){                    var tr = document.createElement("tr");                    var td1 = document.createElement("td");                      td1.innerHTML = mes.sno;                    var td2 = document.createElement("td");                      td2.innerHTML = mes.sname;                     var td3 = document.createElement("td");                      td3.innerHTML = mes.grade;                    var td4 = document.createElement("td");                    td4.innerHTML= "<a class='dels' href='javascript:'>删除</a>";                      tr.appendChild(td1);                      tr.appendChild(td2);                      tr.appendChild(td3);                    tr.appendChild(td4);                     oTab.tBodies[0].appendChild(tr);                }                function changeTab(){                    console.log(oTab.tBodies[0].rows.length)                    for(var i=0;i<oTab.tBodies[0].rows.length;i++){                        if(i%2==0){                            oTab.tBodies[0].rows[i].style.background="#ccc";                        }else{                            oTab.tBodies[0].rows[i].style.background="";                        }                        oTab.tBodies[0].rows[i].onmouseover=function(){                            //保存颜色值                            oldColor=this.style.background;                            this.style.background="green";                        }                        oTab.tBodies[0].rows[i].onmouseout=function(){                            //保存颜色值                            this.style.background=oldColor;                        }                    }                }                function closes(){                    alert(2);                    var dels = document.getElementsByClassName("dels");                    console.log(dels.length);                    for(var i=0;i<dels.length;i++){                        dels[i].index=i;                        console.log("删除处理中....请稍后");                        dels[i].onclick=function(){                            //找到数据库中对应的sno                            var id = this.parentNode.parentNode.firstChild.innerHTML;                            removes(id);                        }                    }                }        }        </script>    </head>    <body>        <div class="add">        <label>学号：</label><input type="text" id="sno"/>        <label>姓名：</label><input type="text" id="sname"/>        <label>专业：</label><input type="text" id="grade"/>               <input type="button" value="添加" id="btn5" />        </div>        <table id="tab" border="1" cellspacing="0">        </table>    </body></html>
阅读全文
0 0