web-sql, javascript, show all tables of database

问题

I need to show on an Webpage all my Tables in my WebSQL-DB. But I start first with JavaScript and WebSQL some Days before.

Database = DATABASE
Tables inside = Table1, Table2, Table3

This is my code:

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

The output must be not an alert. I am open to other ideas.

The Debugging-Tool of Google-Chrome shows no errors.

回答1:

Here is the Complete working code for your problem. The code creates a DB, 2 tables then inserts some data into it. Later we extract all the tables from the DB, then iterate the rows in the DB table. We output the results as html tables.

Here is a codepen for the same.

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

来源：https://stackoverflow.com/questions/39620761/web-sql-javascript-show-all-tables-of-database

标签

javascript

web-sql