web-sql，javascript，显示数据库的所有表
web-sql，javascript，显示数据库的所有表
提问于 2016-09-21 23:28:45
我需要在网页上显示我的所有表在我的WebSQL-DB。但几天前，我先从JavaScript和WebSQL开始。
Database = DATABASE
Tables inside = Table1, Table2, Table3这是我的代码：
<script>
var db = openDatabase('DATABASE', '1.0', 'myDB', 2 * 1024 * 1024);
db.transaction(
function(tx) {
tx.executeSql("SELECT * FROM DATABASE WHERE type = 'table'"), [],
function(tx, results) {
var len = results.rows.length;
var i;
for(i=0; i<len; i++) {
alert(results.rows.item(i));
}
}
}
);
</script>输出不能是警报。我对其他想法持开放态度。
Google-Chrome的调试工具没有显示错误。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-09-22 10:55:53
以下是针对您的问题的完整工作代码。代码创建一个DB，2个表，然后在其中插入一些数据。稍后，我们从DB中提取所有表，然后迭代DB表中的行。我们以html表的形式输出结果。
下面是一个用于相同功能的codepen。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table,tr,th,td{
border-collapse:collapse;
border: 1px solid black;
text-align:center;
}
</style>
<script>
var db;
function runExample() {
createDbAndTables();
getAllTablesFromDB(getResultSetFromTable);
}
function createDbAndTables(callback) {
db = openDatabase('mydb1', '1.0', 'my first database', 2 * 1024 * 1024);
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS tbl1 (id INTERGER UNIQUE, name TEXT)');
tx.executeSql('CREATE TABLE IF NOT EXISTS tbl2 (id INTERGER UNIQUE, name TEXT)');
tx.executeSql('INSERT INTO tbl1 (id,name) VALUES (1,"someone1")');
tx.executeSql('INSERT INTO tbl1 (id,name) VALUES (2,"someone2")');
tx.executeSql('INSERT INTO tbl2 (id,name) VALUES (3,"someone3")');
tx.executeSql('INSERT INTO tbl2 (id,name) VALUES (4,"someone4")');
});
}
function getAllTablesFromDB(callback) {
db.transaction(function(tx) {
tx.executeSql('SELECT tbl_name from sqlite_master WHERE type = "table"', [], function(tx, results) {
callback(results, processResultSet);
});
});
}
function getResultSetFromTable(results, callback) {
var length = results.rows.length;
var j = 0;
for (var i = 0; i < length; i++) {
db.transaction(function(tx) {
var k=0,tblname=results.rows[j++].tbl_name;
tx.executeSql('SELECT * FROM ' + tblname , [], function(tx, results) {
callback(tblname,results);
});
});
}
}
function processResultSet(tblname,results) {
console.log('----------------------'+tblname)
var len = results.rows.length;
var tbl = document.createElement('table');
var trTblName = document.createElement('tr');
var thTblName = document.createElement('th');
thTblName.innerHTML = tblname;
trTblName.colSpan = 2;
trTblName.appendChild(thTblName);
tbl.appendChild(trTblName);
var trHeader = document.createElement('tr');
var th1 = document.createElement('th');
th1.innerHTML = 'id';
var th2 = document.createElement('th');
th2.innerHTML = 'name';
trHeader.appendChild(th1);
trHeader.appendChild(th2);
tbl.appendChild(trHeader);
for (var i = 0; i < len; i++) {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = results.rows[i].id;
var td2 = document.createElement('td');
td2.innerHTML = results.rows[i].name;
tr.appendChild(td1);
tr.appendChild(td2);
tbl.appendChild(tr);
}
var body = document.getElementsByTagName('body')[0];
body.appendChild(tbl);
body.appendChild(document.createElement('hr'));
}
</script>
</head>
<body onload="runExample()">
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39620761
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号