webkit/Chrome simple WebSQL demo

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by userdude</title>
<style type='text/css'>
#query span {
    font-weight: bold;
    font-style: italic;
    color: #888;
}
#query span.success {
    color: green;
}
#query span.error {
    color: red;
}
</style>
<script type='text/javascript'>
window.addEventListener('load', function load(){
    var run = document.getElementById('run'),
        data = document.getElementById('table'),
        qtext = document.getElementById('query'),
        dropped = false,
        created = false,
        cities = ['Houston', 'Dallas', 'Paris', 'New York', 'Buenos Aires', 'London'],
        shortName = 'Cities',
        version = '1.0',
        displayName = 'Cities Demo',
        maxSize = 5 * 1024 * 1024,
        db = false,
        queries = [];

    run.addEventListener('click', query);

    open();

    function query() {
        transact('SELECT * FROM Cities', view);
    }

    function populate(tx) {
        var city,
            i = 0;

        if (cities) {
            if (!dropped) {
                dropped = true;
                transact('DROP TABLE IF EXISTS Cities', populate);

                return;
            }

            if (!created) {
                created = true;
                transact('CREATE TABLE IF NOT EXISTS Cities (id unique, City)', populate);

                return;

            }

            while (city = cities.pop()) {
                transact('INSERT INTO Cities (id, City) VALUES (' + i++ + ', "' + city + '")');
            }
        }
    }

    function open() {
        if (!db && window.openDatabase) {
            db = window.openDatabase(shortName, version, displayName, maxSize);
        }

        if (cities) {
            db.transaction(populate);
        }

        return db;
    }

    function transact(query, callback) {
        var cb = callback,
            qel = document.createElement('p'),
            qid = queries.length;

        if (!open()) {
            console.log('HTML5 Database not supported.');

            return false;
        }

        db.transaction(transact_cb);

        qel.innerHTML = query + ' Query Result: <span id="q' + qid + '">Pending...</span>';

        qtext.appendChild(qel);

        queries[qid] = query;

        function transact_cb(tx) {
            tx.executeSql(query, [], transact_success, transact_error);
        }

        function transact_success(tx, result) {
            var rtext = document.getElementById('q' + qid);

            rtext.className = 'success';
            rtext.innerHTML = 'Success.';

            if (typeof cb == "function") {
                cb(result);
            } else if (cb != undefined) {
                eval(cb + "(result)");
            }
        }

        function transact_error(tx, error) {
            var rtext = document.getElementById('q' + qid);

            rtext.className = 'error';
            rtext.innerHTML = 'Error logged to console.';

            console.log(error);
        }
    }

    function view(result) {
        var thead = '<thead><tr>',
            tbody = '<tbody>',
            row,
            col;

        for (var i = 0, rows = result.rows.length; i < rows; ++i) {
            row = result.rows.item(i);

            tbody += '<tr>';

            for (col in row) {
                if (i === 0) {
                    thead += "<th>" + col + "</th>";
                }

                tbody += '<td>' + row[col] + '</td>';
            }

            tbody += '</tr>';
        }

        thead += '</tr></thead>';
        tbody += '</tbody>';

        data.innerHTML = thead + tbody;
    }

});
</script>
</head>
<body>
<input type="button" id="run" value='Run Query'>
<div id="query"></div>
<table id="table" border="1" cellspacing="1" cellpadding="5"></table>
</body>
</html>