いつもありがとうございます。
今回、チェックボックスをオンにすると対応するデータが配列listに保持され、
オフにするとlistから外され、表示ボタンを押すと保持されているデータが表示されるスクリプトを作っています。テーブルの表の左端にチェックボックスを設けてチェックされた行に仕込まれているidをAjaxでphpなどのサーバーサイドに渡してDBから削除する、といった用途を想定しています。
このような場合、私はついグローバル変数を使ってしまうのですが、前々からグローバル変数は使うべきではないと書籍でもネット上でも書かれていますし、なんか格好悪いなと思っていました。
で、クロージャを使うとクールに書けることはわかって、またいくつかクロージャのサンプルを真似てみたりしたのですが、いざ自分のコードをクロージャで書き換えようとしても具体的にどうやって書けばいいのか分かりません。よろしくお願い致します。
ブラウザはchrome、バージョン 43.0.2357.130 (64-bit)です。
lang
1 program.html 2 3 1 <html> 4 2 <body> 5 3 <pre> 6 4 <script src="program.js"> 7 5 </script> 8 6 </pre> 9 7 <div id="result"></div> 10 8 </body> 11 9 </html> 12
lang
1 program.js 2 3 1 var list = []; 4 2 5 3 window.onload = function() { 6 4 var out = "<table id='tb' border='1'>"; 7 5 for (var i=0; i<3; i++) { 8 6 out += "<tr>" 9 7 out += "<td><input type='checkbox' onclick='chk(this);' /></td>"; 10 8 out += "<td>"+i+"</td>"; 11 9 out += "</tr>"; 12 10 } 13 11 out += "</table>"; 14 12 out += "<input type='button' value='表示' onclick='show();' />" 15 13 document.getElementById("result").innerHTML = out; 16 14 } 17 15 18 16 var chk = function(e) { 19 17 var chkid = e.parentNode.nextSibling.childNodes[0].nodeValue; 20 18 if (e.checked) { 21 19 list.push(chkid); 22 20 } else { 23 21 for (var i=0; i<list.length; i++) { 24 22 if (list[i] == chkid) { 25 23 list.splice(i, 1); 26 24 } 27 25 } 28 26 } 29 27 } 30 28 31 29 function show() { 32 30 console.log(list); 33 31 }
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/30 12:30