The alerts fire with the correct values, but the innerHTMLs of ID and data show undefined. Why would that be? data_num shows the correct number (100) in the innerHTML:
tx.executeSql("INSERT INTO test_table (data, data_num) VALUES (?,?)", ["test", 100], function(tx, res) {
alert("1. insertId: " + res.insertId + " [should be 1]");
db.transaction(function(tx) {
tx.executeSql("SELECT data_num from test_table;", [], function(tx, res) {
alert("2. res.rows.length: " + res.rows.length + " [should be 1]");
alert("3. res.rows.item(0).data_num: " + res.rows.item(0).data_num + " [should be 100]");
alert("Starting display of table...");
// my addition START
document.getElementById("output").innerHTML =
"<table><tr><td>id = " + res.rows.item(0).id +
"</td><td>data = " + res.rows.item(0).data +
"</td><td>data_num = " + res.rows.item(0).data_num +
"</td></tr></table>";
// my addition END
}); // SELECT
}); // db.function(tx)
}, function(e) { // function(tx, res)
alert("ERROR: " + e.message);
});// INSERT