Web-sql, javascript,显示数据库的所有表



我需要在网页上显示我所有的表在我的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的调试工具显示没有错误

这是针对您的问题的完整工作代码。代码创建了一个数据库,2个表,然后将一些数据插入其中。稍后,我们从DB中提取所有表,然后迭代DB表中的行。我们将结果输出为html表格。

这是一个相同的代码依赖。

<!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>

最新更新