学校で授業の出欠管理のアプリ(?)を作成中です。
これをローカルストレージで保存・読み込み・削除をしたいです。その方法を教えてください。
(必要ならば記載した部分のコードの変更等はしてもらって結構です。)
仕様的には現状を維持したいです。
・教科名をキーボード入力
・授業回数をキーボード入力
・休みのカウント
・メモをキーボード入力
HTML
1<div> 2 1教科授業数:<input class="text" id="classes" type="text" value="15" /> 3 <span id="ok"><input type="button" value="決定" id="decisionbtn"> 4 </span> 5 </div> 6 <div>最低出席数 :<input class="text"id="lowest" type="text" value="10" /> 7 </div> 8 9 <table id="school_schedule" border="1"> 10 <tr> 11 <th></th> 12 <th>月曜</th> 13 <th>火曜</th> 14 </tr> 15 <tr><!-- 1限 --> 16 <th>1限</th> 17 <td id="tdmon1"><!-- 月曜 --> 18 <div class="change">教科名月1</div> 19 <input type="button" value="休み" id="mon1"/>:<input type="button" value="修正" id="re_mon1"/> 20 <div class="count" id="count_mon1"></div> 21 <div class="change">メモ:<div> 22 </td> 23 <td><!-- 火曜 --> 24 <div class="change">教科名火1</div> 25 <input type="button" value="休み" id="tues1" />:<input type="button" value="修正" id="re_tues1"> 26 <div class="count" id="count_tues1"></div> 27 <div class="change">メモ:<div> 28 </td> 29 </tr> 30 </table>
JavaScript
1var click_count_mon1 = 0; click_count_tues1 = 0; upperlimit=""; 2 3//テキストその場編集 4(function(documet){ 5 6 $(document).ready(function(){ 7 $(".change").click(edit_toggle()); 8 }); 9 function edit_toggle(){ 10 var edit_flag=false; 11 return function(){ 12 if(edit_flag) return; 13 var $input = $("<input>").attr("type","text").val($(this).text()); 14 $(this).html($input); 15 16 $("input", this).focus().blur(function(){ 17 save(this); 18 $(this).after($(this).val()).unbind().remove(); 19 edit_flag = false; 20 }); 21 edit_flag = true; 22 } 23 } 24 function save(elm){ 25 26 } 27})(document); 28 29 30$(function(){ 31 //授業数指定 32 $("#decisionbtn").click(function(){ 33 upperlimit = $("input[id='classes']").val(); 34 $('#ok').text("OK!"); 35 36 //ボタンがクリックされたときの処理 37 //inputタグのtype属性buttonにアクセスするセレクタ 38 $(".count").text("0回"); 39 //休みボタンが押されたときの処理 40 $("#mon1").click(function(){//月曜1限 41 if(click_count_mon1 >= 0 && click_count_mon1 < upperlimit) { 42 click_count_mon1++; 43 $("#count_mon1").text(click_count_mon1 + "回"); 44 } 45 }); 46 47 48 $("#tues1").click(function(){//火曜1限 49 if(click_count_tues1 >= 0 && click_count_tues1 < upperlimit) { 50 click_count_tues1++; 51 $("#count_tues1").text(click_count_tues1 + "回"); 52 } 53 }); 54 55 //修正ボタンの処理 56 $("#re_mon1").click(function(){//月曜1限 57 if(click_count_mon1 > 0 && click_count_mon1 <= upperlimit){ 58 click_count_mon1--; 59 $("#count_mon1").text(click_count_mon1 + "回"); 60 } 61 62 }); 63 $("#re_tues1").click(function(){//火曜1限 64 if(click_count_tues1 > 0 && click_count_tues1 <= upperlimit){ 65 click_count_tues1--; 66 $("#count_tues1").text(click_count_tues1 + "回"); 67 } 68 }); 69 }); 70}); 71 72//テキストフォーカス 73$(function(){ 74 $(document).ready(function(){ 75 $(".text").click(function(){ 76 $(this).select(); 77 }); 78 79 }); 80});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。