Html test

Html code posted
created at 07 Nov 23:49, updated at 11 Nov 23:14

Edit | Back 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Web SQL Storage</title>
    <script language="javascript" type="text/javascript">   
        
        var db = createTable();
        
        function getopenDb() { 
            try {
                if (window.openDatabase) {                    
                    return window.openDatabase;                    
                } else {
                    alert('No HTML5 support');
                    return undefined;
                }
            }
            catch (e) {
                alert(e);
                return undefined;
            }            
        }
        function createTable() {
            var openDB = getopenDb();
            if(!openDB)
            {                
                return;               
            }
            else
            {
                db = openDB('mydb001', '1.0', 'my db', 10*1024*1024);
                db.transaction(function (t) { //t = transaction
                t.executeSql('CREATE TABLE IF NOT EXISTS myTable(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL DEFAULT "JohnDoe", age INT NOT NULL);', [], null, null);               
                
            });
            sel('',null);
            return db;
            }            
        }
        function insert() {
            if(!db)
            {                
                return;                
            }
            var name = document.getElementById("name").value;
            var age = document.getElementById("age").value;
        
            db.transaction(function (t) { //t = transaction
                t.executeSql("INSERT INTO myTable('name','age') values('" + name + "'," + age + ");", [], null, null);
                alert("Row Inserted!");
                sel('',null);
            });
        }
        function sel(w, w1) {
            
            var q = "select * from myTable";
            if (w != "") {
                q += "where " + w + " = '" + w1 + "'";
            }
            db.transaction(function (t) { //t = transaction
                t.executeSql(q, null, function (t, data) {
                    var html = "<table><tr><td>ID</td><td>Name</td><td>Age</td></tr>";
                    for (var i = 0; i < data.rows.length; i++) {
                        html += "<tr><td>" + data.rows.item(i).id + "</td><td>" + data.rows.item(i).name + "</td><td>" + data.rows.item(i).age + "</td></tr>";
                    }
                    html += "</table>";
                    var el = document.getElementById("main");
                    el.innerHTML = html;
                });
            });
        }
        
        function clearDB() {
            if(!db)
            {                
                return;                
            }
            if(confirm('Clear the entire table?')) {
                db.transaction(function(t) {
                    t.executeSql('DELETE FROM myTable');
                });
                sel('',null);
            }
        }
        
    </script>
    <style>
        *{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}
        fieldset{border-radius: 5px;padding:20px;}        
        .btn {
            border-radius: 5px;
            border:1px solid #000;
            background-color:#cccccc;
            padding:5px;
        }
        table{
            border: 1px; solid; #000;
        }
        
    </style>
</head>
<body>
<fieldset>
<legend>Web SQL Database</legend>
<h4>Insert Rows</h4>
Name: <input type="text" id="name" /> Age: <input type="text" id="age" /><a href="javascript:void(0);" class="btn" onclick="insert();">Insert</a>
<a href="javascript:void(0);" class="btn" onclick="clearDB();">Clear</a>
</fieldset>
<div id="main"></div>
</body>
</html>
3.93 KB in 8 ms with coderay