質問編集履歴
5
完成
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修正
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
|
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
|
-
|
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
|
-
|
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
|
-
|
201
|
+
</body>
|
194
|
-
|
195
|
-
<input type="button" value="クリア" id="clear">
|
196
|
-
|
197
|
-
</div>
|
198
202
|
|
199
203
|
```
|
200
204
|
|
3
HTML修正
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
|
-
<
|
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
|
-
|
197
|
+
</div>
|
186
198
|
|
187
199
|
```
|
188
200
|
|
2
HTMLコードの追加
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
コードの修正
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
|
-
|
45
|
+
day: $("#day").val(),
|
46
46
|
|
47
|
-
|
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
|
-
|
55
|
+
|
54
56
|
|
55
|
-
|
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
|
-
|
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
|
-
|
81
|
+
storage.getItem("datalist" + i)
|
86
82
|
|
83
|
+
}
|
87
84
|
|
85
|
+
|
88
86
|
|
89
|
-
/*
|
87
|
+
/* 登録されているkey, valueを順に取得して表示 */
|
90
88
|
|
91
|
-
|
89
|
+
var v_id = "datalist" + i;
|
92
90
|
|
93
|
-
var
|
91
|
+
var v_day = obj.day;
|
94
92
|
|
95
|
-
|
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
|
|