質問編集履歴

6

追記:jQueryの修正

2019/04/11 10:18

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -24,10 +24,6 @@
24
24
 
25
25
 
26
26
 
27
- 毎日質問していて本当に申し訳ないのですが、一日考えても全くわかりません…
28
-
29
- 申し訳ありませんが回答頂けますと幸いです。
30
-
31
27
 
32
28
 
33
29
  【参考コード】
@@ -627,3 +623,173 @@
627
623
 
628
624
 
629
625
  ```
626
+
627
+
628
+
629
+ 4/11 追記
630
+
631
+ 思い切ってjQueryを書き直してみました。
632
+
633
+ 選択した行だけ削除はできるようになったのですが、1回しか削除されないところと、ページを更新した時に履歴が表示されず困っています。
634
+
635
+ 何か手立てはありますでしょうか…?
636
+
637
+
638
+
639
+ ```
640
+
641
+ // This is a JavaScript file
642
+
643
+ $(function () {
644
+
645
+
646
+
647
+ /* ここにjQueryのコードを記述 */
648
+
649
+
650
+
651
+ /* ローカルストレージ設定 */
652
+
653
+ var storage = localStorage;
654
+
655
+
656
+
657
+
658
+
659
+
660
+
661
+ $('#f1').on('submit', function (e){
662
+
663
+ e.preventDefault()
664
+
665
+
666
+
667
+ /* 履歴を保存 */
668
+
669
+ var key = $("#day").val();
670
+
671
+ var value = $("#money").val();
672
+
673
+
674
+
675
+ /* key,valueに値が入っているかチェック */
676
+
677
+ if (key && value) {
678
+
679
+ storage.setItem(key, value);
680
+
681
+ }
682
+
683
+
684
+
685
+ /* いったん中身を空にする */
686
+
687
+ $("#list").empty();
688
+
689
+
690
+
691
+ /* localStorageすべての情報の取得 */
692
+
693
+ for (var i=0; i < storage.length; i++){
694
+
695
+ var _key = storage.key(i);
696
+
697
+
698
+
699
+
700
+
701
+ /* 登録されているkey, valueを順に取得して表示 */
702
+
703
+ var tr = $("<tr></tr>");
704
+
705
+ var td1 = $("<td></td>");
706
+
707
+ var td2 = $("<td></td>");
708
+
709
+ $("#list").append(tr);
710
+
711
+ tr.append(td1).append(td2).append($('<td>').html('<input type="button" value="-" id="remove">'))
712
+
713
+ td1.html(_key);
714
+
715
+ td2.html(storage.getItem(_key));
716
+
717
+ }
718
+
719
+ });
720
+
721
+
722
+
723
+ /* 選択した列のデータを削除 */
724
+
725
+ $(document).on( "click" , "#remove" , function(){
726
+
727
+ var key = $("#day").val();
728
+
729
+ storage.removeItem(key);
730
+
731
+ key = "";
732
+
733
+ window.location.reload();
734
+
735
+ });
736
+
737
+
738
+
739
+ /* 全てのデータを削除 */
740
+
741
+ $("#clear").click(function() {
742
+
743
+ storage.clear();
744
+
745
+ window.location.reload();
746
+
747
+ });
748
+
749
+
750
+
751
+ /* 課金上限 保存 */
752
+
753
+ $("#kettei").click(function() {
754
+
755
+ storage.setItem("jogen", $("#kakin").val());
756
+
757
+
758
+
759
+ /* 課金上限 表示 */
760
+
761
+ var value = storage.getItem("jogen");
762
+
763
+ $("#rslt").text(value);
764
+
765
+ });
766
+
767
+
768
+
769
+ /* リロードした時のに課金上限・履歴を表示*/
770
+
771
+ $(document).ready( function(){
772
+
773
+ var value = storage.getItem("jogen");
774
+
775
+ $("#rslt").text(value);
776
+
777
+ var key = $("#day").val();
778
+
779
+ var value = $("#money").val();
780
+
781
+ storage.getItem(key,value)
782
+
783
+ });
784
+
785
+
786
+
787
+
788
+
789
+
790
+
791
+ /* 終了タグ */
792
+
793
+ });
794
+
795
+ ```

5

追記

2019/04/11 10:18

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -555,3 +555,75 @@
555
555
 
556
556
 
557
557
  ```
558
+
559
+ 4/10追記
560
+
561
+ localstrageにデータが保存されるようになった、テーブルもページ更新したら出るようになったのですが、テーブルの中にデータがはいりません。
562
+
563
+ ここのコードが間違っているだろう、というのはわかるのですが色々やってみても解消しません。
564
+
565
+ どうしたら良いでしょうか…?
566
+
567
+ ちなみにlocalstrageの名前はstrageにしています。
568
+
569
+ ```
570
+
571
+ /* 履歴を保存 */
572
+
573
+ $('#f1').on('submit', function (){
574
+
575
+ var obj = {
576
+
577
+ data1: $("#day").val(),
578
+
579
+ data2: $("#money").val()
580
+
581
+ }
582
+
583
+ storage.setItem("datalist",JSON.stringify(obj));
584
+
585
+
586
+
587
+ /* 履歴を取得 */
588
+
589
+ var str = storage.getItem("datalist");
590
+
591
+ var obj = JSON.parse(str);
592
+
593
+ })
594
+
595
+
596
+
597
+
598
+
599
+ /* 履歴を表示 */
600
+
601
+ $(document).ready( function(){
602
+
603
+ /* 登録されているkey, valueを順に取得して表示 */
604
+
605
+ var tr = $("<tr></tr>");
606
+
607
+ var td1 = $("<td></td>");
608
+
609
+ var td2 = $("<td></td>");
610
+
611
+ var td3 = $("<td></td>");
612
+
613
+ $("#list").after(tr);
614
+
615
+ tr.append(td1).append(td2).append(td3);
616
+
617
+ $("#td1").strage.getItem('data1');
618
+
619
+ $("#td2").strage.getItem('data2');
620
+
621
+ $("#td3").html('<button class="remove">-</button>')
622
+
623
+ })
624
+
625
+
626
+
627
+
628
+
629
+ ```

4

追記

2019/04/10 07:34

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -489,3 +489,69 @@
489
489
 
490
490
 
491
491
  ```
492
+
493
+
494
+
495
+ 追記:履歴部分のコードを自分なりに書いてみたのですが、何かが間違っているらしく全く動きません…
496
+
497
+ 間違っている箇所があればご指摘いただけたら幸いです…。
498
+
499
+
500
+
501
+ ```
502
+
503
+ /* 履歴を保存 */
504
+
505
+ $('#f1').on('submit', function (){
506
+
507
+ var datalist = {
508
+
509
+ data1: $("#day").val(),
510
+
511
+ data2: $("#money").val()
512
+
513
+ }
514
+
515
+ storage.setItem("datalist",JSON.stringify(datalist));
516
+
517
+
518
+
519
+ /* 履歴を取得 */
520
+
521
+ var str = localStorage.getItem("datalist");
522
+
523
+ var obj = JSON.parse(str);
524
+
525
+ })
526
+
527
+
528
+
529
+ /* 履歴を表示 */
530
+
531
+ $(document).ready( function(){
532
+
533
+ // 登録されているkey, valueを順に取得して表示
534
+
535
+ var tr = $("<tr></tr>");
536
+
537
+ var td1 = $("<td></td>");
538
+
539
+ var td2 = $("<td></td>");
540
+
541
+ var td3 = $("<td></td>");
542
+
543
+ $("list").after(tr);
544
+
545
+ tr.append(td1).append(td2);
546
+
547
+ td1.html(ls.getItem(.data1));
548
+
549
+ td2.html(ls.getItem(.data2));
550
+
551
+ td3.html('<button class="remove">-</button>');
552
+
553
+ })
554
+
555
+
556
+
557
+ ```

3

追記

2019/04/09 05:43

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -439,3 +439,53 @@
439
439
 
440
440
 
441
441
  ```
442
+
443
+ 追記:JSONに変更して保存するところまでうまくいったと思うのですが…
444
+
445
+ 保存したデータを表示すると`{"data1":"#day","data2":"#money"}`と表示されました。
446
+
447
+ これをデータ形式で表示する方法はありますでしょうか…?
448
+
449
+
450
+
451
+ ```jQuery
452
+
453
+ /* 履歴を保存 */
454
+
455
+ $('#f1').on('submit', function (){
456
+
457
+ var datalist = {
458
+
459
+ data1: "#day",
460
+
461
+ data2: "#money"
462
+
463
+ }
464
+
465
+ storage.setItem("datalist",JSON.stringify(datalist));
466
+
467
+
468
+
469
+ /* 履歴を取得 */
470
+
471
+ var str = localStorage.getItem("datalist");
472
+
473
+ var obj = JSON.parse(str);
474
+
475
+ })
476
+
477
+
478
+
479
+ /* 履歴を表示 */
480
+
481
+ $(document).ready( function(){
482
+
483
+ var value = storage.getItem("datalist");
484
+
485
+ $("#t1 tbody").text(value);
486
+
487
+ });
488
+
489
+
490
+
491
+ ```

2

編集

2019/04/08 02:57

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -210,7 +210,7 @@
210
210
 
211
211
  追記:簡単な「課金上限」を保存するところからやってみました。
212
212
 
213
- localstrageには保存されるのですがvalueがundefinedと表示されます。
213
+ localstrageには保存されるのですがページを更新すると課金上限の金額が0円に戻ってしいます。
214
214
 
215
215
  なぜでしょうか…?
216
216
 
@@ -366,7 +366,7 @@
366
366
 
367
367
  ```jQuery
368
368
 
369
- // This is a JavaScript file
369
+ /// This is a JavaScript file
370
370
 
371
371
  $(function () {
372
372
 
@@ -422,9 +422,9 @@
422
422
 
423
423
  /* 課金上限 表示 */
424
424
 
425
- var value = localStorage.getItem("jogen");
425
+ var value = storage.getItem("jogen");
426
-
426
+
427
- $("#rslt").number(value);
427
+ $("#rslt").text(value);
428
428
 
429
429
  });
430
430
 
@@ -432,10 +432,10 @@
432
432
 
433
433
 
434
434
 
435
-
436
-
437
435
  /* 終了タグ */
438
436
 
439
437
  });
440
438
 
439
+
440
+
441
- ```
441
+ ```

1

追記

2019/04/04 05:46

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -205,3 +205,237 @@
205
205
  });
206
206
 
207
207
  ```
208
+
209
+
210
+
211
+ 追記:簡単な「課金上限」を保存するところからやってみました。
212
+
213
+ localstrageには保存されるのですがvalueが「undefined」と表示されます。
214
+
215
+ なぜでしょうか…?
216
+
217
+
218
+
219
+ ```HTML
220
+
221
+ <!DOCTYPE HTML>
222
+
223
+ <html>
224
+
225
+ <head>
226
+
227
+ <meta charset="utf-8">
228
+
229
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
230
+
231
+ <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
232
+
233
+ <script src="components/loader.js"></script>
234
+
235
+ <link rel="stylesheet" href="css/main.css">
236
+
237
+ <script src="js/jquery-3.3.1.min.js"></script>
238
+
239
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
240
+
241
+ <script type="text/javascript" src="js/main.js"></script>
242
+
243
+
244
+
245
+ <title>メイン</title>
246
+
247
+
248
+
249
+ </head>
250
+
251
+ <body>
252
+
253
+ <header>
254
+
255
+ <div id="nav-drawer">
256
+
257
+ <input id="nav-input" type="checkbox" class="nav-unshown">
258
+
259
+ <label id="nav-open" for="nav-input"><span>menu</span></label>
260
+
261
+ <label class="nav-unshown" id="nav-close" for="nav-input"></label>
262
+
263
+ <div id="nav-content">
264
+
265
+ <form id="settei" oninput="rslt.value = Number(settei.value);">
266
+
267
+ <p>上限設定</p>
268
+
269
+ <p><input type="number" id="kakin">円</p>
270
+
271
+ </form>
272
+
273
+ <input type="button" value="決定" class="ketei" onclick="nav-close" id="kettei">
274
+
275
+ </div>
276
+
277
+ </div>
278
+
279
+ </header>
280
+
281
+ <form id="f3">
282
+
283
+ <div class="main">
284
+
285
+ <div class="jougen">
286
+
287
+ <p>課金上限</p>
288
+
289
+ <p><output id="rslt" form="settei" class="jogen">0</output>円</p>
290
+
291
+ </div>
292
+
293
+ </form>
294
+
295
+ <div class="honbun1">
296
+
297
+ <p>入力</p>
298
+
299
+ <div style="display:inline-flex">
300
+
301
+ <form id="f1">
302
+
303
+ <div class="moji">
304
+
305
+ <input type="date" name="day" id="day" class="day">
306
+
307
+ <input type="number" class="money" name="money" id="money"> 円
308
+
309
+ <input type="submit" value="入力" class="kettei1"></div>
310
+
311
+ </form>
312
+
313
+ </div>
314
+
315
+ </div>
316
+
317
+ <div class="nokori">
318
+
319
+ <p>今月の残り課金額</p>
320
+
321
+ <p><output name="result" >0</output>円</p>
322
+
323
+ </div>
324
+
325
+ <br>
326
+
327
+ <form id="f2">
328
+
329
+ <p>履歴</p>
330
+
331
+ <div class="rireki">
332
+
333
+ <table id="t1" border="1">
334
+
335
+ <thead>
336
+
337
+ <tr>
338
+
339
+ <th width="30%">日付</th>
340
+
341
+ <th width="50%">金額</th>
342
+
343
+ <th width="20%">削除</th>
344
+
345
+ </tr>
346
+
347
+ </thead>
348
+
349
+ <tbody>
350
+
351
+ </tbody>
352
+
353
+ </table>
354
+
355
+ </div>
356
+
357
+ </form>
358
+
359
+ <input type="reset" value="クリア">
360
+
361
+ </div>
362
+
363
+ </html>
364
+
365
+ ```
366
+
367
+ ```jQuery
368
+
369
+ // This is a JavaScript file
370
+
371
+ $(function () {
372
+
373
+
374
+
375
+ /* ここにjQueryのコードを記述 */
376
+
377
+ /* 履歴表示 */
378
+
379
+ $('#f1').on('submit', function (e) {
380
+
381
+ e.preventDefault();
382
+
383
+ var v_day = $("#day").val();
384
+
385
+ var v_money = $("#money").val();
386
+
387
+ if (v_day !== "" && v_money !== "") {
388
+
389
+ $('#t1 tbody').after($('<tr>').append($('<td>').text(v_day)).append($('<td>').text(v_money)).append($('<td>').html('<button class="remove">-</button>')));
390
+
391
+ $("#day,#money").val("");}
392
+
393
+ });
394
+
395
+
396
+
397
+ /* 削除ボタン作動 */
398
+
399
+ $('#f2').on('remove' , function (e) {
400
+
401
+ e.preventDefault();
402
+
403
+ $(this).parents(tr).remove();
404
+
405
+ })
406
+
407
+
408
+
409
+ /* セッションストレージ設定 */
410
+
411
+ var storage = localStorage;
412
+
413
+
414
+
415
+ /* 課金上限 保存 */
416
+
417
+ $("#kettei").click(function() {
418
+
419
+ storage.setItem("jogen", $("#kakin").val());
420
+
421
+
422
+
423
+ /* 課金上限 表示 */
424
+
425
+ var value = localStorage.getItem("jogen");
426
+
427
+ $("#rslt").number(value);
428
+
429
+ });
430
+
431
+
432
+
433
+
434
+
435
+
436
+
437
+ /* 終了タグ */
438
+
439
+ });
440
+
441
+ ```