简单实现websql

最新推荐文章于 2025-07-27 11:18:13 发布
原创最新推荐文章于 2025-07-27 11:18:13 发布 · 481 阅读
0 ·
CC 4.0 BY-SA版权
js 专栏收录该内容
3 篇文章
订阅专栏
以下仅贴出源码，有兴趣的朋友可以看下
<!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>