日付けと数値を、Setitemを使って保存しています。
そのデーターを呼び出して表形式で表示したいと思います。
データは、10個単位で表示し、次へボタンを押すと
次の10個のデータが表示されるようにしたいです。
データの保存、呼び出しはサンプルプログラムで
htmlでの表の表示は作れたのですが、表に数値を当てはめる方法が
よくわかりません。
よろしくお願いいたします。
該当のソースコード
JAVA
1class Util { 2 // ローカルストレージのデータを取得 3 static getItems() { 4 let localData = localStorage.getItem('count_data'); 5 if(localData !== null) { 6 return JSON.parse(localData); 7 } else { 8 return {}; 9 } 10 } 11 // 今日のデータを保存 12 static saveItem() { 13 // 今日の日付をyyyy-MM-dd形式にする 14 let date = new Date(); 15 let today = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`; 16 17 // ローカルストレージのデータを取得 18 let items = this.getItems(); 19 if(today in items) { 20 // 既に今日の分のデータが保存済みの場合 21 let result = confirm('本日分のデータを上書きしますか?') 22 if (!result) return; 23 } 24 // 今日のデータをオブジェクトにセット 25 items[today] = count; 26 console.log(count); 27 28 // ローカルストレージに保存 29 localStorage.setItem('count_data', JSON.stringify(items)); 30 31 } 32}; 33 34 35 36 37```html 38 39<div class="content content-monitoring"> 40 <div class="wrap"> 41 <div class="main"> 42 <ul class="menu btn-up cf"> 43 <a class="monitoring" id="up" style="text-align: center;width: 100%;" href="javascript:void(0)" ontouchstart=""><li class="btn-monitoring"> 44 <div class="arrow-center"><img src="./public/img/others/arrow_up.png" alt=""></div> 45 </li></a> 46 </ul> 47 <div class="table-egfr" id="table"> 48 <table class="table-egfr"> 49 <tr class="head"> 50 <th></th> 51 <td class="td-date">日</td> 52 <td class="td-value">計測値</td> 53 </tr> 54 <tr> 55 <th><input name="select" type="radio"></th> 56 <td class="td-date">12月15日</td> 57 <td class="td-value">90</td> 58 </tr> 59 <tr class="tr-green"> 60 <th><input name="select" type="radio"></th> 61 <td class="td-date">12月15日</td> 62 <td class="td-value">90</td> 63 </tr> 64 <tr> 65 <th><input name="select" type="radio"></th> 66 <td class="td-date">12月15日</td> 67 <td class="td-value">90</td> 68 </tr> 69 <tr class="tr-green"> 70 <th><input name="select" type="radio"></th> 71 <td class="td-date">12月15日</td> 72 <td class="td-value">90</td> 73 </tr> 74 <tr> 75 <th><input name="select" type="radio"></th> 76 <td class="td-date">12月15日</td> 77 <td class="td-value">90</td> 78 </tr> 79 <tr class="tr-green"> 80 <th><input name="select" type="radio"></th> 81 <td class="td-date">12月15日</td> 82 <td class="td-value">90</td> 83 </tr> 84 <tr> 85 <th><input name="select" type="radio"></th> 86 <td class="td-date">12月15日</td> 87 <td class="td-value">90</td> 88 </tr> 89 <tr class="tr-green"> 90 <th><input name="select" type="radio"></th> 91 <td class="td-date">12月15日</td> 92 <td class="td-value">90</td> 93 </tr> 94 <tr> 95 <th><input name="select" type="radio"></th> 96 <td class="td-date">12月15日</td> 97 <td class="td-value">90</td> 98 </tr> 99 <tr class="tr-green"> 100 <th><input name="select" type="radio"></th> 101 <td class="td-date">12月15日</td> 102 <td class="td-value">90</td> 103 </tr> 104 </table> 105 </div>
試したこと
htmlの中にどのように値を当てはめればいいかよくわかりません。
補足情報(FW/ツールのバージョンなど)
Monaca