teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問外部json読み込みテーブルのtr行と対応する値の取得と反映ができない

編集履歴

質問編集履歴

9

編集

2020/09/25 10:26

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -578,7 +578,7 @@
578
578
 
579
579
  $(document).on("click", '#btn4444', function(){
580
580
 
581
- window.changeValue=5;
581
+ window.changeValue=4;
582
582
 
583
583
 
584
584
 
@@ -624,16 +624,14 @@
624
624
 
625
625
  //4列目をよむ
626
626
 
627
- $("#subresult3").text(TableSelect($('table'), 4, window.line+1));
628
-
629
627
  window.Calc1=TableSelect($('table'), window.changeValue, window.line+1);
630
628
 
629
+ $("#subresult3").text(window.Calc1);
630
+
631
+ $("#gassan").text(window.Calc1);
632
+
631
633
 
632
634
 
633
- $("#gassan").text(parseFloat(window.Calc1));
634
-
635
-
636
-
637
635
  //console.log(window.changeValue);
638
636
 
639
637
  //console.log(window.line);

8

編集

2020/09/25 10:26

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -602,7 +602,7 @@
602
602
 
603
603
 
604
604
 
605
- return parseFloat($('table').find($(q)).text());
605
+ return $('table').find($(q)).text();
606
606
 
607
607
  //return table.querySelector (q).textContent;
608
608
 

7

編集

2020/09/25 10:20

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -502,148 +502,150 @@
502
502
 
503
503
  '<td><label style="display:none;">'+this.dt1+this.dt2+'</label>'+ this.dt2 + '</td>' +
504
504
 
505
+ '<td>'+this.ps1 + '</td>' +
506
+
507
+ '<td>'+ this.ps2 + '</td>'+
508
+
509
+ '</tr>').appendTo('table.tbl tbody');
510
+
511
+ })
512
+
513
+ })
514
+
515
+
516
+
517
+
518
+
519
+ //計算
520
+
521
+ $('#button').on("click",function(){
522
+
523
+ var re = new RegExp($('#search').val());
524
+
525
+ $('#result tbody tr').each(function(){
526
+
527
+ var txt = $(this).find("td:eq(0)").html();
528
+
529
+ var txt2 = $(this).find("td:eq(1)").html();
530
+
531
+
532
+
533
+
534
+
535
+ if(txt.match(re) == null && txt2.match(re) == null){
536
+
537
+ $(this).css('display', 'none');
538
+
539
+
540
+
541
+ }else{
542
+
543
+ $(this).css('display', 'table-row');
544
+
545
+ }
546
+
547
+ });
548
+
549
+ });
550
+
551
+
552
+
553
+ $('#button2').on("click",function(){
554
+
555
+ $('#search').val('');
556
+
557
+ $('#result tr').css('display', 'table-row');
558
+
559
+ });
560
+
561
+
562
+
563
+
564
+
565
+ $(document).on("change", 'input[type="radio"]', function(){
566
+
567
+ //選択したvalue値を変数に格納
568
+
569
+ window.line = $(this).parents('tr').index();
570
+
571
+ });
572
+
573
+
574
+
575
+
576
+
577
+ //[確定]ボタン
578
+
579
+ $(document).on("click", '#btn4444', function(){
580
+
581
+ window.changeValue=5;
582
+
583
+
584
+
585
+ gassanFnc();
586
+
587
+ });
588
+
589
+
590
+
591
+
592
+
593
+ //合算処理function
594
+
595
+ function gassanFnc() {
596
+
597
+ function TableSelect (table, x = 1, y = 1) {
598
+
599
+ //let q = `tr:nth-of-type(${y}) td:nth-of-type(${x})`;
600
+
601
+ let q = `table tr:nth-of-type(${y}) td:nth-of-type(${x})`;
602
+
603
+
604
+
605
+ return parseFloat($('table').find($(q)).text());
606
+
607
+ //return table.querySelector (q).textContent;
608
+
609
+ }
610
+
611
+ if(window.line==undefined){
612
+
613
+ }else{
614
+
615
+ //5が列４
616
+
617
+ //console.log (TableSelect(document.querySelector('table'), 5, window.line+1));
618
+
619
+ if(window.changeValue==undefined){
620
+
621
+ window.changeValue = 1;
622
+
623
+ }else{
624
+
625
+ //4列目をよむ
626
+
627
+ $("#subresult3").text(TableSelect($('table'), 4, window.line+1));
628
+
629
+ window.Calc1=TableSelect($('table'), window.changeValue, window.line+1);
630
+
505
631
 
506
632
 
507
- '<td>'+this.ps1 + '</td>' +
508
-
509
- '<td>'+ this.ps2 + '</td>'+
510
-
511
- '</tr>').appendTo('table.tbl tbody');
512
-
513
- })
514
-
515
- })
516
-
517
-
518
-
519
-
520
-
521
- //計算
522
-
523
- $('#button').on("click",function(){
633
+ $("#gassan").text(parseFloat(window.Calc1));
524
-
525
- var re = new RegExp($('#search').val());
634
+
526
-
635
+
636
+
527
- $('#result tbody tr').each(function(){
637
+ //console.log(window.changeValue);
528
-
529
- var txt = $(this).find("td:eq(0)").html();
638
+
530
-
531
- var txt2 = $(this).find("td:eq(1)").html();
532
-
533
-
534
-
535
-
536
-
537
- if(txt.match(re) == null && txt2.match(re) == null){
538
-
539
- $(this).css('display', 'none');
540
-
541
-
542
-
543
- }else{
544
-
545
- $(this).css('display', 'table-row');
639
+ //console.log(window.line);
640
+
546
-
641
+ console.log(window.Calc1);
642
+
643
+
644
+
547
- }
645
+ }
548
-
549
- });
550
-
551
- });
552
-
553
-
554
-
555
- $('#button2').on("click",function(){
556
-
557
- $('#search').val('');
558
-
559
- $('#result tr').css('display', 'table-row');
560
-
561
- });
562
-
563
-
564
-
565
-
566
-
567
- $(document).on("change", 'input[type="radio"]', function(){
568
-
569
- //選択したvalue値を変数に格納
570
-
571
- window.line = $(this).parents('tr').index();
572
-
573
- console.log("radio change");
574
-
575
- });
576
-
577
-
578
-
579
-
580
-
581
- //[確定]ボタン
582
-
583
- $(document).on("click", '#btn4444', function(){
584
-
585
- window.changeValue=5;
586
-
587
- gassanFnc();
588
-
589
- });
590
-
591
-
592
-
593
-
594
-
595
- //合算処理function
596
-
597
- function gassanFnc() {
598
-
599
- function TableSelect (table, x = 1, y = 1) {
600
-
601
- let q = `tr:nth-of-type(${y}) td:nth-of-type(${x})`;
602
-
603
- //console.log($(q).find('table').textContent)
604
-
605
- return $('table').find($(q)).textContent
606
-
607
- //return table.querySelector (q).textContent;
608
646
 
609
647
  }
610
648
 
611
- if(window.line==undefined){
612
-
613
- }else{
614
-
615
- //5が列４
616
-
617
- //console.log (TableSelect(document.querySelector('table'), 5, window.line+1));
618
-
619
- if(window.changeValue==undefined){
620
-
621
- window.changeValue = 1;
622
-
623
- }else{
624
-
625
- //4列目をよむ
626
-
627
- $("#subresult3").text(TableSelect($('table'), 4, window.line+1));
628
-
629
- window.Calc1=TableSelect($('table'), window.changeValue, window.line+1);
630
-
631
- $("#gassan").innerHTML=parseFloat(window.Calc1);
632
-
633
-
634
-
635
- //console.log(window.changeValue);
636
-
637
- //console.log(window.line);
638
-
639
- console.log(window.Calc1);
640
-
641
-
642
-
643
- }
644
-
645
- }
646
-
647
649
  }
648
650
 
649
651
  </script>

6

表示

2020/09/25 10:19

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -26,17 +26,13 @@
26
26
 
27
27
  （例）
28
28
 
29
- -------------------------
30
-
31
29
  データ１　データAA　データBB
32
30
 
33
31
  あああ　　あああ　　あああ
34
32
 
35
- -------------------------
36
-
37
33
  上のように表示されるのが正解として、
38
34
 
39
- -------------------------
35
+
40
36
 
41
37
  データ１　データAA　データBB
42
38
 
@@ -46,8 +42,6 @@
46
42
 
47
43
  あああ　　あああ　　あああ
48
44
 
49
- -------------------------
50
-
51
45
  と２回同じデータが出力されます。
52
46
 
53
47
 

5

編集

2020/09/25 09:08

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -322,9 +322,9 @@
322
322
 
323
323
  </tbody>
324
324
 
325
- </table>
325
+ </table>
326
-
327
- </table>
326
+
327
+
328
328
 
329
329
 
330
330
 
@@ -576,7 +576,7 @@
576
576
 
577
577
  window.line = $(this).parents('tr').index();
578
578
 
579
- console.log(window.line);
579
+ console.log("radio change");
580
580
 
581
581
  });
582
582
 
@@ -600,13 +600,15 @@
600
600
 
601
601
  //合算処理function
602
602
 
603
- function gassanFnc() {
603
+ function gassanFnc() {
604
604
 
605
605
  function TableSelect (table, x = 1, y = 1) {
606
606
 
607
607
  let q = `tr:nth-of-type(${y}) td:nth-of-type(${x})`;
608
608
 
609
+ //console.log($(q).find('table').textContent)
610
+
609
- return $('q').find('table')
611
+ return $('table').find($(q)).textContent
610
612
 
611
613
  //return table.querySelector (q).textContent;
612
614
 
@@ -628,12 +630,22 @@
628
630
 
629
631
  //4列目をよむ
630
632
 
631
- $("#subresult3").text(TableSelect($('table'), 4, window.line+1));
633
+ $("#subresult3").text(TableSelect($('table'), 4, window.line+1));
632
634
 
633
635
  window.Calc1=TableSelect($('table'), window.changeValue, window.line+1);
634
636
 
635
637
  $("#gassan").innerHTML=parseFloat(window.Calc1);
636
638
 
639
+
640
+
641
+ //console.log(window.changeValue);
642
+
643
+ //console.log(window.line);
644
+
645
+ console.log(window.Calc1);
646
+
647
+
648
+
637
649
  }
638
650
 
639
651
  }

4

データがうまく反映されない

2020/09/25 08:51

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -16,6 +16,42 @@
16
16
 
17
17
 
18
18
 
19
+ 追記：
20
+
21
+ テーブルに同じデータが2回書き込まれているのですが、
22
+
23
+ どこに問題があるのでしょうか？
24
+
25
+
26
+
27
+ （例）
28
+
29
+ -------------------------
30
+
31
+ データ１　データAA　データBB
32
+
33
+ あああ　　あああ　　あああ
34
+
35
+ -------------------------
36
+
37
+ 上のように表示されるのが正解として、
38
+
39
+ -------------------------
40
+
41
+ データ１　データAA　データBB
42
+
43
+ あああ　　あああ　　あああ
44
+
45
+ データ１　データAA　データBB
46
+
47
+ あああ　　あああ　　あああ
48
+
49
+ -------------------------
50
+
51
+ と２回同じデータが出力されます。
52
+
53
+
54
+
19
55
  【補足】
20
56
 
21
57
  金額は、
@@ -28,6 +64,8 @@
28
64
 
29
65
 
30
66
 
67
+
68
+
31
69
  ```html
32
70
 
33
71
  <!DOCTYPE html>

3

jquery置換

2020/09/25 07:45

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -548,7 +548,7 @@
548
548
 
549
549
  //[確定]ボタン
550
550
 
551
- $("#btn4444").on("click",function(){
551
+ $(document).on("click", '#btn4444', function(){
552
552
 
553
553
  window.changeValue=5;
554
554
 
@@ -564,15 +564,13 @@
564
564
 
565
565
  function gassanFnc() {
566
566
 
567
- //$("#subresult1").text(window.line);
568
-
569
- //選択
570
-
571
567
  function TableSelect (table, x = 1, y = 1) {
572
568
 
573
- let q = `tr:nth-of-type(${y}) td:nth-of-type(${x})`;
569
+ let q = `tr:nth-of-type(${y}) td:nth-of-type(${x})`;
570
+
574
-
571
+ return $('q').find('table')
572
+
575
- return table.querySelector (q).textContent;
573
+ //return table.querySelector (q).textContent;
576
574
 
577
575
  }
578
576
 

2

jquery置換

2020/09/25 07:35

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -468,7 +468,9 @@
468
468
 
469
469
  '<td class="label">' + this.dt1 + '</td>' +
470
470
 
471
- '<td>'+this.dt2 + '</td>' +
471
+ '<td><label style="display:none;">'+this.dt1+this.dt2+'</label>'+ this.dt2 + '</td>' +
472
+
473
+
472
474
 
473
475
  '<td>'+this.ps1 + '</td>' +
474
476
 
@@ -530,9 +532,9 @@
530
532
 
531
533
 
532
534
 
533
- $('input[type="radio"]').change(function() {
535
+ $(document).on("change", 'input[type="radio"]', function(){
534
-
536
+
535
- //選択したvalue値を変数に格納
537
+ //選択したvalue値を変数に格納
536
538
 
537
539
  window.line = $(this).parents('tr').index();
538
540
 
@@ -542,9 +544,11 @@
542
544
 
543
545
 
544
546
 
547
+
548
+
545
549
  //[確定]ボタン
546
550
 
547
- document.querySelector("#btn4444").addEventListener("click", ()=>{
551
+ $("#btn4444").on("click",function(){
548
552
 
549
553
  window.changeValue=5;
550
554
 
@@ -588,11 +592,11 @@
588
592
 
589
593
  //4列目をよむ
590
594
 
591
- $("#subresult3").text(TableSelect(document.querySelector('table'), 4, window.line+1));
595
+ $("#subresult3").text(TableSelect($('table'), 4, window.line+1));
592
-
596
+
593
- window.Calc1=TableSelect(document.querySelector('table'), window.changeValue, window.line+1);
597
+ window.Calc1=TableSelect($('table'), window.changeValue, window.line+1);
594
-
598
+
595
- document.querySelector("#gassan").innerHTML=parseFloat(window.Calc1);
599
+ $("#gassan").innerHTML=parseFloat(window.Calc1);
596
600
 
597
601
  }
598
602
 

1

余分な表記を消去

2020/09/25 07:26

投稿

Miii
Miii

スコア30

test CHANGED
File without changes
test CHANGED
@@ -650,6 +650,4 @@
650
650
 
651
651
  ]}
652
652
 
653
- コード
654
-
655
653
  ```