質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

1回答

1352閲覧

getitemで呼び出したデータを表にしたい@monaca

yamakapi1212

総合スコア10

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

1クリップ

投稿2018/09/12 10:54

編集2018/09/12 10:56

日付けと数値を、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">1215</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">1215</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">1215</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">1215</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">1215</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">1215</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">1215</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">1215</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">1215</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">1215</td> 102 <td class="td-value">90</td> 103 </tr> 104 </table> 105 </div>

試したこと

htmlの中にどのように値を当てはめればいいかよくわかりません。

補足情報(FW/ツールのバージョンなど)

Monaca

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

spookybird

2018/09/12 12:58

HTMLもコードブロックに入れていただきたいです。んで、localStorageに書き出すことはできてるんですよね?その書き出すデータはどうやって集めてきてるんですか?集めてきてるのと逆のことをやれば画面に値を描画していくことができますよ。
guest

回答1

0

HTMLの中に値をあてはめるには、document.querySelector()で要素を取得して、
textContentプロパティに値を代入します。

投稿2018/10/27 04:30

coboco

総合スコア121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問