我試圖在我的存儲中使用web sql數據庫在移動設備上顯示數據。下面是代碼，我不知道如何去在html頁面正文中顯示數據庫數據。混合應用程序中的Web sql數據庫

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 

<script type="text/javascript" charset="utf-8" src="cordova.js"></script> 
<script type="text/javascript" charset="utf-8"> 

// Wait for device API libraries to load 
// 
document.addEventListener("deviceready", onDeviceReady, false); 

// Populate the database 
// 
function populateDB(tx) { 
    tx.executeSql('DROP TABLE IF EXISTS DEMO'); 
    tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)'); 
    tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")'); 
    tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")'); 
} 

// Query the database 
// 
function queryDB(tx) { 
    tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB); 
} 

// Query the success callback 
// 
function querySuccess(tx, results) { 
    var len = results.rows.length; 
    console.log("DEMO table: " + len + " rows found."); 
    for (var i=0; i<len; i++){ 
     console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data = " + results.rows.item(i).data); 
    } 
} 

// Transaction error callback 
// 
function errorCB(err) { 
    console.log("Error processing SQL: "+err.code); 
} 

// Transaction success callback 
// 
function successCB() { 
    var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000); 
    db.transaction(queryDB, errorCB); 
} 

// device APIs are available 
// 
function onDeviceReady() { 
    var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000); 
    db.transaction(populateDB, errorCB, successCB); 
} 

</script>

例DB

來源

2013-10-09 beny lim

下面是使用jquery在一個表中，以顯示它的一種方式（未測試）。

<body> 
    <table id="myTable"></table> 
</body> 

.... 
.... 

function querySuccess(tx, results) { 
    // Get a reference to your table in the body tag 
    var table = $("#myTable"); 
    var len = results.rows.length; 

    for (var i=0; i<len; i++){ 

     // Get the data from the database to be displayed 
     var id = results.rows.item(i).id; 
     var data = results.rows.item(i).data; 

     // Create the html elements using jquery 
     var tableRow = $('<tr/>', {}); 
     var tableId = $('<td/>', {text: id}); 
     var tableData = $('<td/>', {text: data}); 

     // Append the elements to the table 
     tableRow.append(tableId); 
     tableRow.append(tableData); 
     table.append(tableRow); 
    } 
}

來源

2013-10-18 21:34:13 jnortey

混合應用程序中的Web sql數據庫

例DB

回答

相關問題