teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問配列の要素数分、テーブルに格納

編集履歴

質問編集履歴

2

コード編集

2017/02/15 16:56

投稿

tai_chi
tai_chi

スコア15

title CHANGED
File without changes
body CHANGED
@@ -11,48 +11,7 @@
11
11
 
12
12
  ###該当のソースコード
13
13
  ```HTML
14
- <!DOCTYPE html>
15
- <html lang="ja">
16
- <head>
17
- <meta charset="utf-8">
18
- <title>localStorageのサンプル</title>
19
- <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
20
-
21
- <!-- Latest compiled and minified CSS -->
22
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
23
14
 
24
- <!-- Optional theme -->
25
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
26
-
27
- <!-- Latest compiled and minified JavaScript -->
28
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
29
-
30
- </head>
31
- <body>
32
- <div id="form">
33
- <textarea id="text1" name="japanese" cols="40" rows="5"></textarea>
34
- <!-- <input id="text1" type="text" size="50"> -->
35
- <input id="text2" type="text" size="50">
36
- <input id="text3" type="text" size="50">
37
- </div>
38
-
39
-
40
- <input type="button" onClick="saveData()" value="データ保存">
41
- <input type="button" onClick="readData()" value="データ読込">
42
- <input type="button" onClick="delData()" value="データ削除">
43
-
44
-
45
-
46
- <p id="exp_Q"></p>
47
- <p id="exp_A"></p>
48
- <p id="exp_I"></p>
49
-
50
- <p>単語：</p>
51
- <p id="list_Q">ex</p>
52
- <p id="list_A">ex</p>
53
- <p id="list_I">ex</p>
54
- <button id="next">進む</button>
55
-
56
15
  <table>
57
16
  <thead>
58
17
  <tr>
@@ -70,70 +29,6 @@
70
29
  <script>
71
30
 
72
31
 
73
-
74
-
75
- var obj = {};
76
- var x = 1;
77
-
78
-
79
- function saveData() {
80
- var text1 = $("#text1").val();
81
- var text2 = $("#text2").val();
82
- var text3 = $("#text3").val();
83
-
84
-
85
- obj[x] = {
86
- "english": text1,
87
- "japanese": text2,
88
- "info": text3
89
- };
90
-
91
- console.log(obj);
92
-
93
- x = x + 1;
94
- localStorage.setItem("data", JSON.stringify(obj));
95
- // console.log(obj[1].english);
96
- alert("a");
97
- }
98
-
99
- function readData() {
100
- // オブジェクトに戻して取得
101
- $("#exp_Q, #exp_A, #exp_I").empty();
102
- var object = JSON.parse(localStorage.getItem("data"));
103
- var keys = Object.keys(object);
104
- for (var i = 0; i < Object.keys(object).length; i += 1) {
105
- $("#exp_Q").append(keys[i] + ": " + object[keys[i]]['english'] + ", ");
106
- $("#exp_A").append(keys[i] + ": " + object[keys[i]]['japanese'] + ", ");
107
- $("#exp_I").append(keys[i] + ": " + object[keys[i]]['info'] + ", ");
108
- // $("#list_I").html(object[Object.keys(object)[i]]['english']);
109
- }
110
- }
111
-
112
- var i = 0;
113
- var iMax = 0;
114
- $('#next').on('click', function() {
115
- // //配列が最後まで行った後の処理
116
- // if ( i == iMax ) { //===でも動く
117
- // if(confirm('AGAIN？')){
118
- // reset1();
119
- // }
120
- // }
121
- var object = JSON.parse(localStorage.getItem("data"));
122
- var keys = Object.keys(object);
123
- // $('#list_I').text("sdss");
124
- $('#list_Q').text(object[keys[i]]['english']);
125
- $('#list_A').text(object[keys[i]]['japanese']);
126
- $('#list_I').text(object[keys[i]]['info']);
127
- console.log(object[keys[i]]['english']);
128
- i++;
129
- });
130
-
131
- function reset1() {
132
- $('#list_Q').text(object[keys[0]]['english']);
133
- $('#list_A').text(object[keys[0]]['japanese']);
134
- $('#list_I').text(object[keys[0]]['info']);
135
- i = 0;
136
- }
137
32
  function list(){
138
33
  var object = JSON.parse(localStorage.getItem("data"));
139
34
  var keys = Object.keys(object);
@@ -164,8 +59,6 @@
164
59
  // $("#listbox").append(wak);
165
60
 
166
61
  </script>
167
- </body>
168
- </html>
169
62
  ```
170
63
 
171
64
  ###試したこと

1

function list\(\){}内の記述を変えました。

2017/02/15 16:56

投稿

tai_chi
tai_chi

スコア15

title CHANGED
File without changes
body CHANGED
@@ -1,11 +1,11 @@
1
1
  ###前提・実現したいこと
2
2
  JSON形式で登録した配列分だけ、
3
- 一覧で表示したいと考えております。
3
+ tableで表示したいと考えております。
4
4
 
5
5
  ###発生している問題・エラーメッセージ
6
- for文で回して、タグを作っていくのだろうと思い、
6
+ tbodyにidをつけ、function list(){}で
7
- 調べて似たようなコードを見つけました。
7
+ tobody内にセルをつけるように記述しました。
8
- ただ、組み込もうと思っても、うまくいきません。
8
+ ただ、undefinedのまま配列が取得されません。
9
9
 
10
10
  ご教示頂きたいです。どうぞよろしくお願い致します。
11
11
 
@@ -53,36 +53,19 @@
53
53
  <p id="list_I">ex</p>
54
54
  <button id="next">進む</button>
55
55
 
56
- <table id="listbox" class="table table-striped">
56
+ <table>
57
- <thead>
57
+ <thead>
58
- <tr>
58
+ <tr>
59
- <th>No</th>
59
+ <th>No</th>
60
- <th>English</th>
60
+ <th>English</th>
61
- <th>Japanese</th>
61
+ <th>Japanese</th>
62
- <th>Info</th>
62
+ <th>Info</th>
63
- </tr>
63
+ </tr>
64
- </thead>
64
+ </thead>
65
- <tbody>
66
- <tr>
67
- <td>1</td>
68
- <td>John</td>
69
- <td>Carter</td>
70
- <td>johncarter@mail.comaaaaaaaaaaaaaaaaaaa</td>
71
- </tr>
72
- <tr>
73
- <td>2</td>
74
- <td>Peter</td>
75
- <td>Parker</td>
76
- <td>p</td>
77
- </tr>
78
- <tr>
79
- <td>3</td>
80
- <td>John</td>
81
- <td>Rambo</td>
65
+ <tbody id="listbox">
82
- <td>j</td>
66
+
83
- </tr>
84
- </tbody>
67
+ </tbody>
85
- </table>
68
+ </table>
86
69
 
87
70
  <script>
88
71
 
@@ -154,13 +137,20 @@
154
137
  function list(){
155
138
  var object = JSON.parse(localStorage.getItem("data"));
156
139
  var keys = Object.keys(object);
140
+ var a = "";
157
141
  for( var i=0, l=keys.length; i<l; i+=1) {
158
- console.log(keys[i], object[ keys[i]] );
159
- alert(object[keys[i]]['english'] + object[keys[i]]['japanese'] );
142
+ alert(object[keys[i]]['english']);
143
+ a += "<tr>\n";
144
+ for (j = 0; j < keys[i].length; j++) {
145
+ a += "<td>";
146
+ a += object[keys[i]][j];
147
+ a += "<td>\n";
160
- }
148
+ }
161
-
149
+ a += "</tr>\n";
162
- }
150
+ }
163
-
151
+ $("#listbox").append(a);
152
+ }
153
+
164
154
  // var a = "";
165
155
  // for (i = 0; i < ary.length; i++) {
166
156
  // a += "<tr>\n";