jQueryが反映されません＞＜
jQueryとJavaScriptでToDoメモを作っています
下記のコードなのですが
削除ボタンが表示されないのとToDoリストがおかしな位置に来ます
どうすればいいのでしょうか？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="css/style.css">
<script>
monaca.viewport({width: 340});
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
document.addEventListener("backbutton", onBkbtn, false);
}
function onBkbtn() {
location.href = "index.html";
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>CheckList</h1>
</div>
</center>
<!--新規追加ボックス-->
<center>
<div id="new_div">
<input id="new_txt" type="text" value="" placeholder="ToDoを書き込んでください" style="width:270px" size="40"/>
</center>
<br>
<div data-role="button" data-icon="plus" id="add_btn">追加</div>
</div>
<!--項目一覧-->
<div id="items_div"></div>
<div id="control_div">
<div data-role="button" data-icon="delete" id="done_btn">削除</div>
</div>
</div>
<!--Android1.6対策-->
<script src="gear5-0.3.js"></script>
<script>
//便利な関数の定義
function $(id) { return document.getElementById(id); }
//変数の初期化
var todo_div = $("todo_div");
var db;
var cbItems = [] ;
//ドキュメント読み込み時のイベントを設定
window.onload = function() {
if (window.openDatabase == undefined) {
alert("WEB Databaseに対応していません！！") ;
return
}
//データベースを開く
db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024);
db.transaction(function(tr) {
//テーブルがなければ作る
var query =
"CREATE TABLE IF NOT EXISTS todo_tbl(" +
" todo_id INTEGER PRIMARY KEY, " +
" memo TEXT NOT NULL " +
")";
tr.executeSql(query, [], loadItems);
});
};
// アイテムの読み込み実行
function loadItems() {
db.transaction(function(tr) {
var query = "SELECT * FROM todo_tbl" ;
tr.executeSql(query, [] ,loadItems_onResult);
});
}
function loadItems_onResult(tr, rs) {
//すべての子ノードを削除
while(items_div.hasChildNodes()){
items_div.removeChild(items_div.lastChild);
}
cbItems = [];
//チェックボックスの作成
for (var i = 0; i < rs.rows.length; i++) {
var row = rs.rows.item(i);
var todo_id = row.todo_id;
var memo = row.memo;
//チェックボックスの追加
var cb = document.createElement("input");
cb.className = "large"; //CSSに対応させる
cb.type = "checkbox";
cb.value = todo_id;
cbItems.push(cb);
var label = document.createElement("span");
label.innerHTML = memo;
var line = document.createElement("div");
line.appendChild(cb); //チェックを追加
line.appendChild(label); //ラベルを追加
items_div.appendChild(line); //項目にlineを追加
}
}
//追加ボタンを押したときのイベント
$("add_btn").onclick = function() {
var text = $("new_txt").value;
$("new_txt").value = "";
db.transaction(function(tr) {
var query = "INSERT INTO todo_tbl(memo)VALUES(?)";
tr.executeSql(query,[text],loadItems);
});
};
//削除を押した時のイベント
$("done_btn").onclick = function() {
db.transaction(function(tr) {
for (var i in cbItems) {
var cb = cbItems[i];
if(!cb.checked) continue;
var query = "DELETE FROM todo_tbl WHERE todo_id=?";
tr.executeSql(query,[cb.value]);
}
},function(){ alert('削除失敗') },loadItems);
};
</script>
</body>
</html>
お礼
解答ありがとうございました。 参考になりました。