Question

我正在尝试学习.js以及如何创建本地存储。我使用HTML中的JavaScript创建了本地存储。我能够创建它，但问题是我无法创建删除功能工作，我完全失去了。我一直试图解决这个问题，但无法弄清楚我在哪里找不到链接。有人可以帮助我。

这是我的剧本

var db = null;
var db = openDatabase('To Do', '1.0', 'To Do', 2 * 1024 * 1024);
db.transaction(function(tx){
    tx.executeSql('CREATE TABLE IF NOT EXISTS BuildingNames(id INTEGER NOT    NULL PRIMARY KEY AUTOINCREMENT, created unique, name, latitude, longtitude )');
});

$('document').ready(function(){
var db = openDatabase('To Do', '1.0', 'To Do', 2 * 1024 * 1024);
    db.transaction(function(tx){
        tx.executeSql('SELECT * FROM BuildingNames', [], querySucess, errorCB);
    });

    function querySucess(tx, results){
        var len = results.rows.length;
            if(len > 0){
                for(i = 0; i < len; i++){           //<span here>//
                    $("#list").append("<li class='names'><br>" + results.rows.item(i).id + "<br>name<br>" + results.rows.item(i).name + "latitude<br>" + results.rows.item(i).latitude + "</li>");
                }

            }else{
                console.log("You Have No BuildingNames");
            }

    }
    function errorCB(err){
     alert("Error" + err.code);
    }
});



$("#go").click(function(){ // can put parameter inside the function ( like created,    name, description, duedate ) //.
var name = $("#name").val();
var namelen = $("#name").val().length;
var latitude = $("#latitude").val();
var longtitude = $("#longtitude").val();
var created = $.now();  
//var duedate = new Date()//
        if(namelen >= 4){
    function populateDB(tx){
        tx.executeSql('CREATE TABLE IF NOT EXISTS BuildingNames(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, created unique, name, latitude, longtitude )');
        tx.executeSql('INSERT INTO BuildingNames(created, name, latitude, longtitude) VALUES(?, ?, ?, ?)', [created, name, latitude, longtitude]);
        }
    function errorCB(err){
        alert("You did something wrong");
        }
    function successCB(){
        alert("success");
    }
    var db = openDatabase('To Do', '1.0', 'To Do', 2 * 1024 * 1024);
    db.transaction(populateDB,errorCB,successCB);

        }else{
            alert("You Must Have four or more character");

        }
});




$("#delete").on("click",function(){

    function deleteDB(tx){

 var newform = "BuildingNames";

    tx.executeSql("DELETE  FROM " + newform + " WHERE now = " + id + " ");

    }

    function errorCB(err){
        alert("Whoops, That Was Strange!");
        }

    function successCB(){
                alert("deleted");
            }

    var db = openDatabase('To Do', '1.0', 'To Do', 2 * 1024 * 1024);
    db.transaction(deleteDB,errorCB,successCB);

});

这是我的HTML

<!doctype>
<html>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<head>
    <link rel="stylesheet" type="text/css" href="css/database.css"/>


    <script type="text/javascript" src="js/jquery.js"></script>


</head>
<body>
    <div id="buildings">
    <input type="text" id="name" placeholder="Building Name"/>
    <input type="text" id="latitude"  placeholder="latitude"/>
    <input type="text" id="longtitude" placeholder="longtitude"/>
    <input type="button" id="go" value="Go"/>
    <input type="button" id="delete" value="delete"/>

    <div id="list" ></div>
<!--<input type="text" id="myinput"/>
<div id="submit">Submit</div>
<div id="deletestorage">Delete</div>    --> 
    </div>

        <script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>

无法使删除功能起作用

0 个答案: