WebDatabaseのlistから選択項目表示
HTML5 Web Database でlistから選択した項目を詳細表示したい。詳細一覧detail_b()押下した際、listで選ばれているレコード内容を表示したい。色々試しているのですが・・・どこがおかしいかわかりません。
function load() で
list.options[list.options.length] = new Option(row.val2, row.val, row.key1);
項目表示した場合、
function detail_b() で
どのようなSELECT文を書けば listで選択された行を指定できるのですか？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var db = openDatabase("my_sample3", "", "Sample for my3", 1024*1024);
db.transaction(function(tx) {
tx.executeSql("create table if not exists storage (key1, val, val2)");
});
function load() {
db.transaction(function(tx) {
tx.executeSql("select * from storage", [], function(tx, rs) {
var list = document.getElementById("list");
list.innerHTML = "";
var rows = rs.rows;
for (var i = 0, n = rows.length; i < n; i++) {
var row = rows.item(i);
list.options[list.options.length] = new Option(row.val2, row.val, row.key1);
}
});
});
}
function detail_b() {
var list = document.getElementById("list");
if (list.selectedIndex < 0) {
return;
}
var selected = list.options[list.selectedIndex].value;
db.transaction(function(tx) {
tx.executeSql("select * from storage where key1 = ?", [selected], function(tx, rs) {
var rows = rs.rows;
var row = rows.item(0);
detail.innerHTML = "";
detail.options[detail.options.length] = new Option(row.val2, row.val, row.key1);
});
});
}
function remove() {
省略
}
function add() {
省略
}
</script>
</head>
<body onload="load()">
<h1></h1>
<table border="0">
<tbody>
<tr>
<td colspan="2"><select id="list" size="5" style="width: 200px"></select></td>
<td><button onclick="detail_b()">詳細一覧</button><BR><button onclick="remove()">削除</button></td>
<td rowspan="4"><select id="detail" size="5" style="width: 400px"></select></td>
</tr>
<tr>
<td><font face="Times New Roman">キー:</font></td>
<td><input type="text" id="key1"></td>
<td></td>
</tr>
<tr>
<td><font face="Times New Roman">値:</font></td>
<td><input type="text" id="value"></td>
<td></td>
<td></td>
</tr>
<tr>
<td><font face="Times New Roman">値２:</font></td>
<td><input type="text" id="value2"></td>
<td><button onclick="add()">追加</button></td>
</tr>
</tbody>
</table>
</body>
</htm>
補足
全てというのはJavaScript内で値をチェックして変数$yyyなどにいれずにその場で表示する項目を書いてしまうということでしょうか？ そこで、<tr>とか<td>とか書けるのでしょうか？また表示したい項目の場所に表示できるようにできるのでしょうか？