質問編集履歴

5

完成

2019/04/18 07:21

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -219,3 +219,201 @@
219
219
  途中でリロードしてHTMLを取り込んだ後の処理を入れた
220
220
 
221
221
  →現状。一瞬だけtableが現れて消える
222
+
223
+
224
+
225
+ 追記:できました!
226
+
227
+ ```jQuery
228
+
229
+ /* ローカルストレージ設定 */
230
+
231
+ var storage = localStorage;
232
+
233
+ let datalist_st = storage.getItem('datalist');
234
+
235
+ /* 入力ボタンを押すとデータを取得する */
236
+
237
+ $(function() {
238
+
239
+ const day = $('#day').val();
240
+
241
+ const money = $('#money').val();
242
+
243
+
244
+
245
+ displayList();
246
+
247
+ $('#f1').on('submit', function(e) {
248
+
249
+
250
+
251
+ e.preventDefault()
252
+
253
+
254
+
255
+ if ($('#day').val() === '') {
256
+
257
+ alert('日付を入力してください');
258
+
259
+ return false;
260
+
261
+ }
262
+
263
+ if ($('#money').val() === '') {
264
+
265
+ alert('金額を入力してください');
266
+
267
+ return false;
268
+
269
+ }
270
+
271
+
272
+
273
+
274
+
275
+ if (datalist_st != null) {
276
+
277
+ datalist = JSON.parse(datalist_st);
278
+
279
+ } else {
280
+
281
+ datalist = [];
282
+
283
+ }
284
+
285
+
286
+
287
+ const row_data = {
288
+
289
+ day: $('#day').val(),
290
+
291
+ money: $('#money').val()
292
+
293
+ };
294
+
295
+
296
+
297
+ datalist.push(row_data);
298
+
299
+
300
+
301
+ storage.setItem('datalist', JSON.stringify(datalist));
302
+
303
+ $("#day,#money").val("");
304
+
305
+ window.location.reload();
306
+
307
+ });
308
+
309
+ });
310
+
311
+
312
+
313
+ function displayList() {
314
+
315
+ if (datalist_st != null) {
316
+
317
+ datalist = JSON.parse(datalist_st);
318
+
319
+ } else {
320
+
321
+ datalist = [];
322
+
323
+ }
324
+
325
+ for (i = 0; i < datalist.length; i++) {
326
+
327
+ let record_tr = $('<tr></tr>', {
328
+
329
+ id: 'row_' + i
330
+
331
+ });
332
+
333
+ const td_id = $('<td></td>', {
334
+
335
+ hidden: 'hidden',
336
+
337
+ html: i
338
+
339
+ });
340
+
341
+ const td_day = $('<td></td>', {
342
+
343
+ html: datalist[i].day
344
+
345
+ });
346
+
347
+ const td_money = $('<td></td>', {
348
+
349
+ html: datalist[i].money
350
+
351
+ });
352
+
353
+ const remove_btn = $('<button></button>', {
354
+
355
+ html: '-',
356
+
357
+ type: 'button',
358
+
359
+ class: 'remove'
360
+
361
+ });
362
+
363
+ remove_btn.attr('data-id', i);
364
+
365
+ const td_remove = $('<td></td>', {
366
+
367
+ html: remove_btn
368
+
369
+ });
370
+
371
+ record_tr.append(td_id);
372
+
373
+ record_tr.append(td_day);
374
+
375
+ record_tr.append(td_money);
376
+
377
+ record_tr.append(td_remove);
378
+
379
+ record_tr.append(td_remove);
380
+
381
+ $('#list').append(record_tr);
382
+
383
+ }
384
+
385
+ /* 選択した列のデータを削除 */
386
+
387
+ $("#list").click(function() {
388
+
389
+ let storageItem = JSON.parse(storage.getItem('datalist'));
390
+
391
+ const id = 'data-id';
392
+
393
+ const index = storageItem.findIndex((v) => v.id === id);
394
+
395
+ const removeid = storageItem.splice(index, 1);
396
+
397
+ storage.setItem('datalist', JSON.stringify(storageItem));
398
+
399
+ window.location.reload();
400
+
401
+ });
402
+
403
+ }
404
+
405
+
406
+
407
+
408
+
409
+ /* 全てのデータを削除 */
410
+
411
+ $("#clear").click(function() {
412
+
413
+ storage.clear();
414
+
415
+ window.location.reload();
416
+
417
+ });
418
+
419
+ ```

4

HTML修正

2019/04/18 07:21

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -106,95 +106,99 @@
106
106
 
107
107
  ```HTML
108
108
 
109
- <div class="main">
109
+ <div class="main">
110
+
110
-
111
+ <form id="f3">
112
+
111
- <div class="jougen">
113
+ <div class="jougen">
112
-
114
+
113
- <p>課金上限</p>
115
+ <p>課金上限</p>
116
+
117
+ <p>
118
+
119
+ <output id="rslt" form="settei" class="jogen">0</output>円
120
+
121
+ </p>
122
+
123
+ </div>
124
+
125
+ </form>
126
+
127
+ <div class="honbun1">
128
+
129
+ <p>入力</p>
130
+
131
+ <div style="display:inline-flex">
132
+
133
+ <form id="f1">
134
+
135
+ <div class="moji">
136
+
137
+ <input type="date" name="day" id="day" class="day">
138
+
139
+ <input type="number" class="money" name="money" id="money">円
140
+
141
+ <input type="submit" value="入力" class="kettei1">
142
+
143
+ </div>
144
+
145
+ </form>
146
+
147
+ </div>
148
+
149
+ </div>
150
+
151
+ <div class="nokori">
152
+
153
+ <p>今月の残り課金額</p>
114
154
 
115
155
  <p>
116
156
 
117
- <output id="rslt" form="settei" class="jogen">0</output>円
157
+ <output name="result" >0</output>円
118
158
 
119
159
  </p>
120
160
 
121
161
  </div>
122
162
 
163
+ <br>
164
+
165
+ <form id="f2">
166
+
167
+ <p>履歴</p>
168
+
169
+ <div class="rireki">
170
+
171
+ <table id="t1" border="1">
172
+
173
+ <thead>
174
+
175
+ <tr>
176
+
177
+ <th hidden>id</th>
178
+
179
+ <th width="30%">日付</th>
180
+
181
+ <th width="50%">金額</th>
182
+
183
+ <th width="20%">削除</th>
184
+
185
+ </tr>
186
+
187
+ </thead>
188
+
189
+ <tbody id="list"></tbody>
190
+
191
+ </table>
192
+
193
+ </div>
194
+
123
- </form>
195
+ </form>
124
-
125
- <div class="honbun1">
196
+
126
-
127
- <p>入力</p>
128
-
129
- <div style="display:inline-flex">
130
-
131
- <form id="f1">
132
-
133
- <div class="moji">
134
-
135
- <input type="date" name="day" id="day" class="day">
136
-
137
- <input type="number" class="money" name="money" id="money">円
138
-
139
- <input type="submit" value="入力" class="kettei1">
197
+ <input type="button" value="クリア" id="clear">
140
-
141
- </div>
142
-
143
- </form>
144
-
145
- </div>
146
198
 
147
199
  </div>
148
200
 
149
- <div class="nokori">
150
-
151
- <p>今月の残り課金額</p>
152
-
153
- <p>
154
-
155
- <output name="result" >0</output>円
156
-
157
- </p>
158
-
159
- </div>
160
-
161
- <br>
162
-
163
- <form id="f2">
164
-
165
- <p>履歴</p>
166
-
167
- <div class="rireki">
168
-
169
- <table id="t1" border="1">
170
-
171
- <thead>
172
-
173
- <tr>
174
-
175
- <th hidden>id</th>
176
-
177
- <th width="30%">日付</th>
178
-
179
- <th width="50%">金額</th>
180
-
181
- <th width="20%">削除</th>
182
-
183
- </tr>
184
-
185
- </thead>
186
-
187
- <tbody id="list"></tbody>
188
-
189
- </table>
190
-
191
- </div>
192
-
193
- </form>
201
+ </body>
194
-
195
- <input type="button" value="クリア" id="clear">
196
-
197
- </div>
198
202
 
199
203
  ```
200
204
 

3

HTML修正

2019/04/16 02:19

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -106,83 +106,95 @@
106
106
 
107
107
  ```HTML
108
108
 
109
+ <div class="main">
110
+
111
+ <div class="jougen">
112
+
109
- <p>課金上限</p>
113
+ <p>課金上限</p>
114
+
110
-
115
+ <p>
116
+
111
- <p><output id="rslt" form="settei" class="jogen">0</output>円</p>
117
+ <output id="rslt" form="settei" class="jogen">0</output>円
118
+
119
+ </p>
120
+
121
+ </div>
122
+
123
+ </form>
124
+
125
+ <div class="honbun1">
126
+
127
+ <p>入力</p>
128
+
129
+ <div style="display:inline-flex">
130
+
131
+ <form id="f1">
132
+
133
+ <div class="moji">
134
+
135
+ <input type="date" name="day" id="day" class="day">
136
+
137
+ <input type="number" class="money" name="money" id="money">円
138
+
139
+ <input type="submit" value="入力" class="kettei1">
140
+
141
+ </div>
142
+
143
+ </form>
144
+
145
+ </div>
112
146
 
113
147
  </div>
114
148
 
149
+ <div class="nokori">
150
+
151
+ <p>今月の残り課金額</p>
152
+
153
+ <p>
154
+
155
+ <output name="result" >0</output>円
156
+
157
+ </p>
158
+
159
+ </div>
160
+
161
+ <br>
162
+
163
+ <form id="f2">
164
+
165
+ <p>履歴</p>
166
+
167
+ <div class="rireki">
168
+
169
+ <table id="t1" border="1">
170
+
171
+ <thead>
172
+
173
+ <tr>
174
+
175
+ <th hidden>id</th>
176
+
177
+ <th width="30%">日付</th>
178
+
179
+ <th width="50%">金額</th>
180
+
181
+ <th width="20%">削除</th>
182
+
183
+ </tr>
184
+
185
+ </thead>
186
+
187
+ <tbody id="list"></tbody>
188
+
189
+ </table>
190
+
191
+ </div>
192
+
115
193
  </form>
116
194
 
117
- <div class="honbun1">
118
-
119
- <p>入力</p>
120
-
121
- <div style="display:inline-flex">
122
-
123
- <form id="f1">
124
-
125
- <div class="moji">
126
-
127
- <input type="date" name="day" id="day" class="day">
128
-
129
- <input type="number" class="money" name="money" id="money"> 円
130
-
131
- <input type="submit" value="入力" class="kettei1"></div>
132
-
133
- </form>
134
-
135
- </div>
136
-
137
- </div>
138
-
139
- <div class="nokori">
140
-
141
- <p>今月の残り課金額</p>
142
-
143
- <p><output name="result" >0</output>円</p>
144
-
145
- </div>
146
-
147
- <br>
148
-
149
- <form id="f2">
150
-
151
- <p>履歴</p>
152
-
153
- <div class="rireki">
154
-
155
- <table id="t1" border="1">
156
-
157
- <thead>
158
-
159
- <tr>
160
-
161
- <th hidden>id</th>
162
-
163
- <th width="30%">日付</th>
164
-
165
- <th width="50%">金額</th>
166
-
167
- <th width="20%">削除</th>
168
-
169
- </tr>
170
-
171
- </thead>
172
-
173
- <tbody id="list">
174
-
175
- </tbody>
176
-
177
- </table>
178
-
179
- </div>
180
-
181
- </form>
182
-
183
195
  <input type="button" value="クリア" id="clear">
184
196
 
185
- </div>
197
+ </div>
186
198
 
187
199
  ```
188
200
 

2

HTMLコードの追加

2019/04/16 01:57

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -104,6 +104,90 @@
104
104
 
105
105
  ```
106
106
 
107
+ ```HTML
108
+
109
+ <p>課金上限</p>
110
+
111
+ <p><output id="rslt" form="settei" class="jogen">0</output>円</p>
112
+
113
+ </div>
114
+
115
+ </form>
116
+
117
+ <div class="honbun1">
118
+
119
+ <p>入力</p>
120
+
121
+ <div style="display:inline-flex">
122
+
123
+ <form id="f1">
124
+
125
+ <div class="moji">
126
+
127
+ <input type="date" name="day" id="day" class="day">
128
+
129
+ <input type="number" class="money" name="money" id="money"> 円
130
+
131
+ <input type="submit" value="入力" class="kettei1"></div>
132
+
133
+ </form>
134
+
135
+ </div>
136
+
137
+ </div>
138
+
139
+ <div class="nokori">
140
+
141
+ <p>今月の残り課金額</p>
142
+
143
+ <p><output name="result" >0</output>円</p>
144
+
145
+ </div>
146
+
147
+ <br>
148
+
149
+ <form id="f2">
150
+
151
+ <p>履歴</p>
152
+
153
+ <div class="rireki">
154
+
155
+ <table id="t1" border="1">
156
+
157
+ <thead>
158
+
159
+ <tr>
160
+
161
+ <th hidden>id</th>
162
+
163
+ <th width="30%">日付</th>
164
+
165
+ <th width="50%">金額</th>
166
+
167
+ <th width="20%">削除</th>
168
+
169
+ </tr>
170
+
171
+ </thead>
172
+
173
+ <tbody id="list">
174
+
175
+ </tbody>
176
+
177
+ </table>
178
+
179
+ </div>
180
+
181
+ </form>
182
+
183
+ <input type="button" value="クリア" id="clear">
184
+
185
+ </div>
186
+
187
+ ```
188
+
189
+
190
+
107
191
 
108
192
 
109
193
  ### 試したこと

1

コードの修正

2019/04/16 01:33

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -32,93 +32,73 @@
32
32
 
33
33
  var storage = localStorage;
34
34
 
35
-
35
+
36
36
 
37
37
  /* 履歴を保存 */
38
38
 
39
- $('#f1').on('submit', function (e){
39
+ $('#f1').on('submit', function (e) {
40
40
 
41
41
  e.preventDefault()
42
42
 
43
43
  var obj = {
44
44
 
45
- day: $("#day").val(),
45
+ day: $("#day").val(),
46
46
 
47
- money: $("#money").val()
47
+ money: $("#money").val()
48
48
 
49
49
  }
50
50
 
51
+ var i = Math.floor(Math.random() * 101);
51
52
 
53
+ storage.setItem("datalist" + i, JSON.stringify(obj));
52
54
 
53
- var i = Math.floor( Math.random() * 101 );
55
+
54
56
 
55
- storage.setItem("datalist" + i ,JSON.stringify(obj));
57
+ /* 履歴を取得 */
56
58
 
59
+ var str = storage.getItem("datalist" + i);
57
60
 
58
-
59
-
60
-
61
-
62
-
63
- /* 履歴を取得 */
64
-
65
- var str = storage.getItem("datalist" + i);
66
-
67
- var obj = JSON.parse(str);
61
+ var obj = JSON.parse(str);
68
-
69
-
70
-
71
-
72
62
 
73
63
  window.location.reload();
74
64
 
65
+ $(document).ready(function () {
75
66
 
67
+
76
68
 
77
- $(document).ready( function(){
69
+ /* いったんデータを全部消す */
78
70
 
71
+ $("#list").empty();
79
72
 
73
+
80
74
 
75
+ /* 全ての要素を取得する */
81
76
 
77
+ for (i = 0; i < storage.length; i++) {
82
78
 
83
- /* いったんデータを全部消す */
79
+ var key = storage.key(i)
84
80
 
85
- $("#list").empty();
81
+ storage.getItem("datalist" + i)
86
82
 
83
+ }
87
84
 
85
+
88
86
 
89
- /* の要素を取得する */
87
+ /* 登録されいるkey, value順に取得して表示 */
90
88
 
91
- for( i = 0; i < storage.length; i++ ){
89
+ var v_id = "datalist" + i;
92
90
 
93
- var key = storage.key(i)
91
+ var v_day = obj.day;
94
92
 
95
- storage.getItem("datalist" + i)
93
+ var v_money = obj.money;
96
94
 
97
- }
95
+ if (v_day !== "" && v_money !== "") $('#t1 tbody').after($('<tr>').append($('<td>').html(v_day)).append($('<td>').text(v_money)).append($('<td>').html('<button class="remove">-</button>')));
98
96
 
97
+ $("#day,#money").val("");
99
98
 
99
+ });
100
100
 
101
- /* 登録されているkey, valueを順に取得して表示 */
102
-
103
- var v_id = "datalist" + i;
104
-
105
- var v_day = obj.day;
106
-
107
- var v_money = obj.money;
108
-
109
- if (v_day !== "" && v_money !== "")
110
-
111
- $('#t1 tbody').after($('<tr>').append($('<td>').html(v_day)).append($('<td>').text(v_money)).append($('<td>').html('<button class="remove">-</button>')));
112
-
113
- $("#day,#money").val("");
114
-
115
-
116
-
117
- });
101
+ });
118
-
119
- });
120
-
121
-
122
102
 
123
103
 
124
104