teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問リーグ戦の勝敗を非同期処理で記入して保存する

編集履歴

質問編集履歴

14

コードの更新　反対側の●も保存

2020/10/14 07:16

投稿

Zengo_Master
Zengo_Master

スコア19

test CHANGED
File without changes
test CHANGED
@@ -86,22 +86,34 @@
86
86
 
87
87
  def win_or_lose
88
88
 
89
+ // 数字_数字を分解
90
+
91
+ resultAry = params[:id].split("_")
92
+
93
+ // 左側が勝利のtd
94
+
89
- result = Result.find(params[:id])
95
+ result_win = Result.find(resultAry[0])
96
+
90
-
97
+ // 右側が敗北のtd
98
+
99
+ result_lose = Result.find(resultAry[1])
100
+
101
+
102
+
91
- if result.result == "◯"
103
+ if result_win.result == "○"
92
-
104
+
93
- result.update(result: "")
105
+ result_win.update(result: "")
106
+
94
-
107
+ result_lose.update(result: "")
108
+
95
- else result.result == ""
109
+ else result_win.result == ""
96
-
110
+
97
- result.update(result: "◯")
111
+ result_win.update(result: "○")
112
+
113
+ result_lose.update(result: "●")
98
114
 
99
115
  end
100
116
 
101
- item = Result.find(params[:id])
102
-
103
- render json: { result: item }
104
-
105
117
  end
106
118
 
107
119
 
@@ -156,11 +168,15 @@
156
168
 
157
169
  <td class="self-name"><%= member.name %></td>
158
170
 
171
+ // 勝敗記入のtd
172
+
159
- <td id="op_<%= i + 1 %>_1" data-id=<%= (i * 10) + 1 %>><%= Result.find((i * 10) + 1).result %></td>
173
+ <td id="op_<%= i + 1 %>_1" data-id="<%= (i * 10) + 1 %>_<%= (10 * (i * 10 + 1)) - (100 * i + (9 - i)) %>"><%= Result.find((i * 10) + 1).result %></td>
160
174
 
161
175
  // 途中略
162
176
 
163
- <td id="op_<%= i + 1 %>_10" data-id=<%= (i * 10) + 10 %>><%= Result.find((i * 10) + 10).result %></td>
177
+ <td id="op_<%= i + 1 %>_10" data-id="<%= (i * 10) + 10 %>_<%= (10 * (i * 10 + 10)) - (100 * i + (9 - i)) %>"><%= Result.find((i * 10) + 10).result %></td>
178
+
179
+ // 勝敗のtd
164
180
 
165
181
  <td id="win_<%= i + 1 %>">0</td>
166
182
 
@@ -418,21 +434,7 @@
418
434
 
419
435
  "_1":{"member":"Aさん","WinOrLose":9},
420
436
 
421
- "_2":{"member":"Bさん","WinOrLose":0},
437
+ // 途中略
422
-
423
- "_3":{"member":"Cさん","WinOrLose":0},
424
-
425
- "_4":{"member":"Dさん","WinOrLose":0},
426
-
427
- "_5":{"member":"Eさん","WinOrLose":0},
428
-
429
- "_6":{"member":"Fさん","WinOrLose":0},
430
-
431
- "_7":{"member":"Gさん","WinOrLose":0},
432
-
433
- "_8":{"member":"Hさん","WinOrLose":0},
434
-
435
- "_9":{"member":"Iさん","WinOrLose":0},
436
438
 
437
439
  "_10":{"member":"Jさん","WinOrLose":0}
438
440
 
@@ -450,21 +452,7 @@
450
452
 
451
453
  "_1":{"member":"Aさん","WinOrLose":0},
452
454
 
453
- "_2":{"member":"Bさん","WinOrLose":0},
455
+ // 途中略
454
-
455
- "_3":{"member":"Cさん","WinOrLose":0},
456
-
457
- "_4":{"member":"Dさん","WinOrLose":0},
458
-
459
- "_5":{"member":"Eさん","WinOrLose":0},
460
-
461
- "_6":{"member":"Fさん","WinOrLose":0},
462
-
463
- "_7":{"member":"Gさん","WinOrLose":0},
464
-
465
- "_8":{"member":"Hさん","WinOrLose":0},
466
-
467
- "_9":{"member":"Iさん","WinOrLose":0},
468
456
 
469
457
  "_10":{"member":"Jさん","WinOrLose":9}
470
458
 

13

コードの更新

2020/10/14 07:16

投稿

Zengo_Master
Zengo_Master

スコア19

test CHANGED
File without changes
test CHANGED
@@ -484,6 +484,10 @@
484
484
 
485
485
  for(var itr = 1; itr < trs.length; itr++){
486
486
 
487
+ var win = 0;
488
+
489
+ var lose = 0;
490
+
487
491
  // テーブルの行毎に処理
488
492
 
489
493
  var tds = trs[itr].getElementsByTagName('td');
@@ -500,12 +504,28 @@
500
504
 
501
505
  // 対戦が同じ場合
502
506
 
503
- tds[itd].classList.add('right_down_border');
507
+ tds[itd].classList.add('right_down_border'); // 縦横同値マスにクラスを指定
504
508
 
505
509
  }
506
510
 
507
511
  else {
508
512
 
513
+ // 勝ち数を加算
514
+
515
+ if(tds[itd].innerHTML == '○'){
516
+
517
+ win ++;
518
+
519
+ }
520
+
521
+ // 負け数を加算
522
+
523
+ else if(tds[itd].innerHTML == '●'){
524
+
525
+ lose ++;
526
+
527
+ }
528
+
509
529
  // 対戦が違う場合、イベントを登録
510
530
 
511
531
  // onclick="winorlose_click(this);" と同じ内容
@@ -516,7 +536,7 @@
516
536
 
517
537
  tds[itd].innerHTML = "○";
518
538
 
519
- }
539
+ }
520
540
 
521
541
  else if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == -1) {
522
542
 
@@ -528,17 +548,21 @@
528
548
 
529
549
  }
530
550
 
531
- // else if(tds[itd].id.indexOf('win_') != -1){ // idにwin_を含む（勝ち数のtd）
551
+ else if(tds[itd].id.indexOf('win_') != -1) {
532
-
533
- // tds[itd].innerHTML = json_data['_'+ arr[1]]['_'+ arr[2]]["WinCount"];
552
+
534
-
535
- // }
553
+ // 勝ち表示
554
+
536
-
555
+ tds[itd].innerHTML = win;
556
+
557
+ }
558
+
537
- // else { // 残るは負け数
559
+ else if(tds[itd].id.indexOf('lose_') != -1) {
538
-
539
- // tds[itd].innerHTML = json_data['_'+ arr[1]]['_'+ arr[2]]["LoseCount"];
560
+
540
-
541
- // }
561
+ // 負け表示
562
+
563
+ tds[itd].innerHTML = lose;
564
+
565
+ }
542
566
 
543
567
  }
544
568
 
@@ -564,7 +588,7 @@
564
588
 
565
589
  // el にはどこでクリックされたかの情報が入っている
566
590
 
567
- var arr = el.target.id.split('_'); // idを'_'で分ける
591
+ var arr = el.target.id.split('_'); // idを'_'で分ける .targetで親要素イベントも発火
568
592
 
569
593
  var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
570
594
 
@@ -574,11 +598,11 @@
574
598
 
575
599
  el.target.innerHTML = '○'; // 勝ち
576
600
 
577
- document.getElementById(oppid).innerHTML = '●'; // 負け
601
+ document.getElementById(oppid).innerHTML = '●'; // 負け
578
-
602
+
579
- json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] = 1;
603
+ json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] = 1; //jsonのデータ自体を更新
580
-
604
+
581
- json_data['_'+ arr[2]]['_'+ arr[1]]["WinOrLose"] = -1;
605
+ json_data['_'+ arr[2]]['_'+ arr[1]]["WinOrLose"] = -1; //jsonのデータ自体を更新
582
606
 
583
607
  }
584
608
 
@@ -588,12 +612,14 @@
588
612
 
589
613
  document.getElementById(oppid).innerHTML = ''; // 空白
590
614
 
591
- json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] = 0;
615
+ json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] = 0; //jsonのデータ自体を更新
592
-
616
+
593
- json_data['_'+ arr[2]]['_'+ arr[1]]["WinOrLose"] = 0;
617
+ json_data['_'+ arr[2]]['_'+ arr[1]]["WinOrLose"] = 0; //jsonのデータ自体を更新
594
618
 
595
619
  }
596
620
 
621
+
622
+
597
623
  // 勝ち数と負け数の計算
598
624
 
599
625
  var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
@@ -624,7 +650,7 @@
624
650
 
625
651
  win ++;
626
652
 
627
- }else if(tds[itd].innerHTML == '●'){
653
+ } else if(tds[itd].innerHTML == '●'){
628
654
 
629
655
  lose ++;
630
656
 

12

コードの修正

2020/10/13 13:26

投稿

Zengo_Master
Zengo_Master

スコア19

test CHANGED
File without changes
test CHANGED
@@ -550,9 +550,19 @@
550
550
 
551
551
  // クリックしたときの処理
552
552
 
553
+ var send_winorlose = false;
554
+
555
+ var XHR;
556
+
553
557
  function winorlose_click(el){
554
558
 
559
+ if(send_winorlose) return; // 送信中は実行できない
560
+
561
+ send_winorlose = true; // 処理中とする
562
+
563
+
564
+
555
- // el にはどこでクリックされたかの情報が入っている
565
+ // el にはどこでクリックされたかの情報が入っている
556
566
 
557
567
  var arr = el.target.id.split('_'); // idを'_'で分ける
558
568
 
@@ -638,34 +648,38 @@
638
648
 
639
649
  }
640
650
 
651
+
652
+
653
+ //※ データの送信は処理の最後
654
+
655
+ //※ 非同期でも結果が返ってくるまでクリックを無視するように変更
656
+
641
- let resultId = el.target.getAttribute("data-id");
657
+ let resultId = el.target.getAttribute("data-id");
658
+
642
-
659
+ if(!XHR){
660
+
643
- let XHR = new XMLHttpRequest();
661
+ XHR = new XMLHttpRequest();
644
-
645
- XHR.open("GET", `/results/${resultId}`, false);
662
+
646
-
647
- XHR.responseType = "text";
663
+ XHR.responseType = "json";
648
-
649
- XHR.send();
664
+
650
-
651
- XHR.onload = function (e) {
665
+ XHR.onload = function() {
652
-
653
- if (xhr.readyState === 4) {
666
+
654
-
655
- if (xhr.status === 200) {
656
-
657
- console.log(xhr.responseText);
667
+ send_winorlose = false; // 送信完了
658
-
659
- } else {
660
-
661
- console.error(xhr.statusText);
662
-
663
- }
664
-
665
- }
666
668
 
667
669
  };
668
670
 
671
+ XHR.onerror = function() {
672
+
673
+ send_winorlose = false; // 送信完了
674
+
675
+ };
676
+
677
+ }
678
+
679
+ XHR.open("GET", `/results/${resultId}`, true);
680
+
681
+ XHR.send();
682
+
669
683
  }
670
684
 
671
685
 

11

データ送信部分のコード修正

2020/10/13 12:36

投稿

Zengo_Master
Zengo_Master

スコア19

test CHANGED
File without changes
test CHANGED
@@ -644,10 +644,28 @@
644
644
 
645
645
  XHR.open("GET", `/results/${resultId}`, false);
646
646
 
647
- XHR.responseType = "json";
647
+ XHR.responseType = "text";
648
648
 
649
649
  XHR.send();
650
650
 
651
+ XHR.onload = function (e) {
652
+
653
+ if (xhr.readyState === 4) {
654
+
655
+ if (xhr.status === 200) {
656
+
657
+ console.log(xhr.responseText);
658
+
659
+ } else {
660
+
661
+ console.error(xhr.statusText);
662
+
663
+ }
664
+
665
+ }
666
+
667
+ };
668
+
651
669
  }
652
670
 
653
671
 

10

コードの修正

2020/10/13 09:05

投稿

Zengo_Master
Zengo_Master

スコア19

test CHANGED
File without changes
test CHANGED
@@ -552,16 +552,6 @@
552
552
 
553
553
  function winorlose_click(el){
554
554
 
555
- const resultId = el.target.getAttribute("data-id");
556
-
557
- const XHR = new XMLHttpRequest();
558
-
559
- XHR.open("GET", `/results/${resultId}`, true);
560
-
561
- XHR.responseType = "json";
562
-
563
- XHR.send();
564
-
565
555
  // el にはどこでクリックされたかの情報が入っている
566
556
 
567
557
  var arr = el.target.id.split('_'); // idを'_'で分ける

9

コードの変更

2020/10/12 12:57

投稿

Zengo_Master
Zengo_Master

スコア19

test CHANGED
File without changes
test CHANGED
@@ -158,21 +158,7 @@
158
158
 
159
159
  <td id="op_<%= i + 1 %>_1" data-id=<%= (i * 10) + 1 %>><%= Result.find((i * 10) + 1).result %></td>
160
160
 
161
- <td id="op_<%= i + 1 %>_2" data-id=<%= (i * 10) + 2 %>><%= Result.find((i * 10) + 2).result %></td>
161
+ // 途中略
162
-
163
- <td id="op_<%= i + 1 %>_3" data-id=<%= (i * 10) + 3 %>><%= Result.find((i * 10) + 3).result %></td>
164
-
165
- <td id="op_<%= i + 1 %>_4" data-id=<%= (i * 10) + 4 %>><%= Result.find((i * 10) + 4).result %></td>
166
-
167
- <td id="op_<%= i + 1 %>_5" data-id=<%= (i * 10) + 5 %>><%= Result.find((i * 10) + 5).result %></td>
168
-
169
- <td id="op_<%= i + 1 %>_6" data-id=<%= (i * 10) + 6 %>><%= Result.find((i * 10) + 6).result %></td>
170
-
171
- <td id="op_<%= i + 1 %>_7" data-id=<%= (i * 10) + 7 %>><%= Result.find((i * 10) + 7).result %></td>
172
-
173
- <td id="op_<%= i + 1 %>_8" data-id=<%= (i * 10) + 8 %>><%= Result.find((i * 10) + 8).result %></td>
174
-
175
- <td id="op_<%= i + 1 %>_9" data-id=<%= (i * 10) + 9 %>><%= Result.find((i * 10) + 9).result %></td>
176
162
 
177
163
  <td id="op_<%= i + 1 %>_10" data-id=<%= (i * 10) + 10 %>><%= Result.find((i * 10) + 10).result %></td>
178
164
 
@@ -514,7 +500,7 @@
514
500
 
515
501
  // 対戦が同じ場合
516
502
 
517
- tds[itd].classList.add('right_down_border'); // 縦横同値マスにクラスを指定
503
+ tds[itd].classList.add('right_down_border');
518
504
 
519
505
  }
520
506
 
@@ -578,7 +564,7 @@
578
564
 
579
565
  // el にはどこでクリックされたかの情報が入っている
580
566
 
581
- var arr = el.target.id.split('_'); // idを'_'で分ける .targetで親要素イベントも発火
567
+ var arr = el.target.id.split('_'); // idを'_'で分ける
582
568
 
583
569
  var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
584
570
 
@@ -588,7 +574,11 @@
588
574
 
589
575
  el.target.innerHTML = '○'; // 勝ち
590
576
 
591
- document.getElementById(oppid).innerHTML = '●'; // 負け
577
+ document.getElementById(oppid).innerHTML = '●'; // 負け
578
+
579
+ json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] = 1;
580
+
581
+ json_data['_'+ arr[2]]['_'+ arr[1]]["WinOrLose"] = -1;
592
582
 
593
583
  }
594
584
 
@@ -598,6 +588,10 @@
598
588
 
599
589
  document.getElementById(oppid).innerHTML = ''; // 空白
600
590
 
591
+ json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] = 0;
592
+
593
+ json_data['_'+ arr[2]]['_'+ arr[1]]["WinOrLose"] = 0;
594
+
601
595
  }
602
596
 
603
597
  // 勝ち数と負け数の計算
@@ -652,10 +646,18 @@
652
646
 
653
647
  }
654
648
 
655
- // json_dataの更新？
656
-
657
649
  }
658
650
 
651
+ let resultId = el.target.getAttribute("data-id");
652
+
653
+ let XHR = new XMLHttpRequest();
654
+
655
+ XHR.open("GET", `/results/${resultId}`, false);
656
+
657
+ XHR.responseType = "json";
658
+
659
+ XHR.send();
660
+
659
661
  }
660
662
 
661
663
 

8

コードの変更

2020/10/12 12:55

投稿

Zengo_Master
Zengo_Master

スコア19

test CHANGED
File without changes
test CHANGED
@@ -60,11 +60,9 @@
60
60
 
61
61
  Rails.application.routes.draw do
62
62
 
63
- get 'json_p/parse'
64
-
65
63
  root to: 'results#index'
66
64
 
67
- post 'json_p/parse'
65
+ get 'results/:id', to: 'results#win_or_lose'
68
66
 
69
67
  end
70
68
 
@@ -86,658 +84,588 @@
86
84
 
87
85
 
88
86
 
87
+ def win_or_lose
88
+
89
+ result = Result.find(params[:id])
90
+
91
+ if result.result == "◯"
92
+
93
+ result.update(result: "")
94
+
95
+ else result.result == ""
96
+
97
+ result.update(result: "◯")
98
+
99
+ end
100
+
101
+ item = Result.find(params[:id])
102
+
103
+ render json: { result: item }
104
+
105
+ end
106
+
107
+
108
+
89
109
  end
90
110
 
91
111
  ```
92
112
 
93
113
 
94
114
 
95
- ```ruby
115
+ ```html
116
+
96
-
117
+ <div class="main">
118
+
119
+ <div class="league-table">
120
+
97
- class JsonPController < ApplicationController
121
+ <h2 class="league-table-title">【リーグ表】</h2>
98
-
99
- def parse
122
+
100
-
101
- json_str = request.body.read # リクエストのJSON
102
-
103
- json_hash = JSON.parse(json_data,symbolize_names: true) # Hashに変換
123
+ <table id="winorlose_table" border="2" bordercolor="black" style="border-collapse: collapse">
104
-
105
-
106
-
107
- # 見やすいように整形
124
+
108
-
109
- response_str =
110
-
111
- "JSON: " + json_str + "n" +
125
+ <tr class="top-title">
126
+
112
-
127
+ <th class="rank-title">順位</th>
128
+
129
+ <th class="player-title">対局者</th>
130
+
131
+
132
+
133
+ <% @members.each do |member| %>
134
+
135
+ <td class="opponent-name"><%= member.name %></td>
136
+
137
+ <% end %>
138
+
139
+
140
+
141
+ <th class="win-count-title">勝</th>
142
+
143
+ <th class="lose-count-title">負</th>
144
+
145
+ <th class="sb-count-title">SB</th>
146
+
147
+ </tr>
148
+
149
+
150
+
151
+ <% @members.each_with_index do |member, i| %>
152
+
113
- "Hash: " + json_hash.to_s + "n"
153
+ <tr class="result-cells">
154
+
114
-
155
+ <td id="rank_<%= i + 1 %>"></td>
156
+
115
-
157
+ <td class="self-name"><%= member.name %></td>
158
+
116
-
159
+ <td id="op_<%= i + 1 %>_1" data-id=<%= (i * 10) + 1 %>><%= Result.find((i * 10) + 1).result %></td>
160
+
161
+ <td id="op_<%= i + 1 %>_2" data-id=<%= (i * 10) + 2 %>><%= Result.find((i * 10) + 2).result %></td>
162
+
163
+ <td id="op_<%= i + 1 %>_3" data-id=<%= (i * 10) + 3 %>><%= Result.find((i * 10) + 3).result %></td>
164
+
165
+ <td id="op_<%= i + 1 %>_4" data-id=<%= (i * 10) + 4 %>><%= Result.find((i * 10) + 4).result %></td>
166
+
167
+ <td id="op_<%= i + 1 %>_5" data-id=<%= (i * 10) + 5 %>><%= Result.find((i * 10) + 5).result %></td>
168
+
169
+ <td id="op_<%= i + 1 %>_6" data-id=<%= (i * 10) + 6 %>><%= Result.find((i * 10) + 6).result %></td>
170
+
171
+ <td id="op_<%= i + 1 %>_7" data-id=<%= (i * 10) + 7 %>><%= Result.find((i * 10) + 7).result %></td>
172
+
173
+ <td id="op_<%= i + 1 %>_8" data-id=<%= (i * 10) + 8 %>><%= Result.find((i * 10) + 8).result %></td>
174
+
175
+ <td id="op_<%= i + 1 %>_9" data-id=<%= (i * 10) + 9 %>><%= Result.find((i * 10) + 9).result %></td>
176
+
177
+ <td id="op_<%= i + 1 %>_10" data-id=<%= (i * 10) + 10 %>><%= Result.find((i * 10) + 10).result %></td>
178
+
179
+ <td id="win_<%= i + 1 %>">0</td>
180
+
181
+ <td id="lose_<%= i + 1 %>">0</td>
182
+
183
+ <td id="sb_<%= i + 1 %>">0</td>
184
+
185
+ </tr>
186
+
187
+ <% end %>
188
+
189
+
190
+
117
- render plain: response_str
191
+ </table>
118
-
192
+
119
- end
193
+ </div>
120
-
194
+
121
- end
195
+ </div>
122
196
 
123
197
  ```
124
198
 
125
199
 
126
200
 
127
- ```html
128
-
129
- <div class="header">
130
-
131
- <h1 class="title">第7回しゅが研<span>毎週金曜日20時〜</span></h1>
132
-
133
- </div>
134
-
135
-
136
-
137
- <div class="main">
138
-
139
- <div class="league-table">
140
-
141
- <h2 class="league-table-title">【リーグ表】</h2>
142
-
143
- <table id="winorlose_table" border="2" bordercolor="black" style="border-collapse: collapse">
144
-
145
- <tr class="top-title">
146
-
147
- <th class="rank-title">順位</th>
148
-
149
- <th class="player-title">対局者</th>
150
-
151
-
152
-
153
- <% @members.each do |member| %>
154
-
155
- <td class="opponent-name"><%= member.name %></td>
156
-
157
- <% end %>
158
-
159
-
160
-
161
- <th class="win-count-title">勝</th>
162
-
163
- <th class="lose-count-title">負</th>
164
-
165
- <th class="sb-count-title">SB</th>
166
-
167
- </tr>
168
-
169
-
170
-
171
- <% @members.each_with_index do |member, i| %>
172
-
173
- <tr class="result-cells">
174
-
175
- <td id="rank_<%= i + 1 %>"></td>
176
-
177
- <td class="self-name"><%= member.name %></td>
178
-
179
- <td id="op_<%= i + 1 %>_1"></td>
180
-
181
- <td id="op_<%= i + 1 %>_2"></td>
182
-
183
- <td id="op_<%= i + 1 %>_3"></td>
184
-
185
- <td id="op_<%= i + 1 %>_4"></td>
186
-
187
- <td id="op_<%= i + 1 %>_5"></td>
188
-
189
- <td id="op_<%= i + 1 %>_6"></td>
190
-
191
- <td id="op_<%= i + 1 %>_7"></td>
192
-
193
- <td id="op_<%= i + 1 %>_8"></td>
194
-
195
- <td id="op_<%= i + 1 %>_9"></td>
196
-
197
- <td id="op_<%= i + 1 %>_10"></td>
198
-
199
- <td id="win_<%= i + 1 %>">0</td>
200
-
201
- <td id="lose_<%= i + 1 %>">0</td>
202
-
203
- <td id="sb_<%= i + 1 %>">0</td>
204
-
205
- </tr>
206
-
207
- <% end %>
208
-
209
-
210
-
211
- </table>
212
-
213
- </div>
214
-
215
-
216
-
217
- <div class="member-list">
218
-
219
- <h2 class="member-list-title">【対局者紹介】</h2>
220
-
221
- <table border="2" bordercolor="black" style="border-collapse: collapse" class="member-table">
222
-
223
-
224
-
225
- <tr class="member-info">
226
-
227
- <th class="member-title">対局者</th>
228
-
229
- <th class="account-title">アカウント</th>
230
-
231
- <th class="achievement-title">実績</th>
232
-
233
- </tr>
234
-
235
-
236
-
237
- <% @members.each do |member| %>
238
-
239
- <tr class="member-introduction">
240
-
241
- <td class="member"><%= member.name %></td>
242
-
243
- <td class="account"><%= member.account %></td>
244
-
245
- <td class="achievement"><%= member.achievement %></td>
246
-
247
- </tr>
248
-
249
- <% end %>
250
-
251
-
252
-
253
- </table>
254
-
255
- </div>
256
-
257
- </div>
258
-
259
- </div>
260
-
261
-
262
-
263
- <div class="footer">
264
-
265
- <div>
266
-
267
- </div>
268
-
269
- </div>
201
+ ```css
202
+
203
+ .header {
204
+
205
+ margin: 20px;
206
+
207
+ padding-bottom: 5px;
208
+
209
+ border-bottom: 2px solid lightgray;
210
+
211
+ }
212
+
213
+
214
+
215
+ .header span {
216
+
217
+ padding-left: 20px;
218
+
219
+ font-size: 25px;
220
+
221
+ }
222
+
223
+
224
+
225
+ .main {
226
+
227
+ margin: 30px;
228
+
229
+ }
230
+
231
+
232
+
233
+ .league-table {
234
+
235
+ margin-top: 20px;
236
+
237
+ }
238
+
239
+
240
+
241
+ .league-table-title {
242
+
243
+ margin-bottom: 5px;
244
+
245
+ }
246
+
247
+
248
+
249
+ .league-table td {
250
+
251
+ text-align: center;
252
+
253
+ }
254
+
255
+
256
+
257
+ .right_down_border {
258
+
259
+ background-image: linear-gradient(to top right, transparent, transparent 48%, black 49%, black 51%, transparent 52%, transparent);
260
+
261
+ }
262
+
263
+
264
+
265
+ .top-title {
266
+
267
+ height: 30px;
268
+
269
+ }
270
+
271
+
272
+
273
+ .rank-title {
274
+
275
+ width: 50px;
276
+
277
+ background-color: #FFFFAA;
278
+
279
+ }
280
+
281
+
282
+
283
+ .player-title {
284
+
285
+ width: 80px;
286
+
287
+ background-color: #EEEEEE;
288
+
289
+ }
290
+
291
+
292
+
293
+ .opponent-name {
294
+
295
+ width: 80px;
296
+
297
+ background-color: #EEEEEE;
298
+
299
+ }
300
+
301
+
302
+
303
+ .win-count-title {
304
+
305
+ width: 50px;
306
+
307
+ background-color: #FFD5EC;
308
+
309
+ }
310
+
311
+
312
+
313
+ .lose-count-title {
314
+
315
+ width: 50px;
316
+
317
+ background-color: #D9E5FF;
318
+
319
+ }
320
+
321
+
322
+
323
+ .sb-count-title {
324
+
325
+ width: 50px;
326
+
327
+ background-color: #F3FFD8;
328
+
329
+ }
330
+
331
+
332
+
333
+ .result-cells {
334
+
335
+ height:40px ;
336
+
337
+ }
338
+
339
+
340
+
341
+ .self-name {
342
+
343
+ height:40px ;
344
+
345
+ background-color: #EEEEEE;
346
+
347
+ }
348
+
349
+
350
+
351
+ .member-list {
352
+
353
+ margin-top: 30px;
354
+
355
+ }
356
+
357
+
358
+
359
+ .member-list-title {
360
+
361
+ margin-bottom: 5px;
362
+
363
+ }
364
+
365
+
366
+
367
+ .member-table td {
368
+
369
+ text-align: center;
370
+
371
+ }
372
+
373
+
374
+
375
+ .member-info {
376
+
377
+ height: 30px;
378
+
379
+ }
380
+
381
+
382
+
383
+ .member-title {
384
+
385
+ width: 100px;
386
+
387
+ text-align: center;
388
+
389
+ background-color: #EEEEEE;
390
+
391
+ }
392
+
393
+
394
+
395
+ .account-title {
396
+
397
+ width: 150px;
398
+
399
+ text-align: center;
400
+
401
+ }
402
+
403
+
404
+
405
+ .achievement-title {
406
+
407
+ width: 500px;
408
+
409
+ text-align: center;
410
+
411
+ }
412
+
413
+
414
+
415
+ .member-introduction td {
416
+
417
+ height: 30px;
418
+
419
+ }
270
420
 
271
421
  ```
272
422
 
273
423
 
274
424
 
275
- ```css
276
-
277
- .header {
278
-
279
- margin: 20px;
280
-
281
- padding-bottom: 5px;
282
-
283
- border-bottom: 2px solid lightgray;
284
-
285
- }
286
-
287
-
288
-
289
- .header span {
290
-
291
- padding-left: 20px;
292
-
293
- font-size: 25px;
294
-
295
- }
296
-
297
-
298
-
299
- .main {
300
-
301
- margin: 30px;
302
-
303
- }
304
-
305
-
306
-
307
- .league-table {
308
-
309
- margin-top: 20px;
310
-
311
- }
312
-
313
-
314
-
315
- .league-table-title {
316
-
317
- margin-bottom: 5px;
318
-
319
- }
320
-
321
-
322
-
323
- .league-table td {
324
-
325
- text-align: center;
326
-
327
- }
328
-
329
-
330
-
331
- .right_down_border {
332
-
333
- background-image: linear-gradient(to top right, transparent, transparent 48%, black 49%, black 51%, transparent 52%, transparent);
334
-
335
- }
336
-
337
-
338
-
339
- .top-title {
340
-
341
- height: 30px;
342
-
343
- }
344
-
345
-
346
-
347
- .rank-title {
348
-
349
- width: 50px;
350
-
351
- background-color: #FFFFAA;
352
-
353
- }
354
-
355
-
356
-
357
- .player-title {
358
-
359
- width: 80px;
360
-
361
- background-color: #EEEEEE;
362
-
363
- }
364
-
365
-
366
-
367
- .opponent-name {
368
-
369
- width: 80px;
370
-
371
- background-color: #EEEEEE;
372
-
373
- }
374
-
375
-
376
-
377
- .win-count-title {
378
-
379
- width: 50px;
380
-
381
- background-color: #FFD5EC;
382
-
383
- }
384
-
385
-
386
-
387
- .lose-count-title {
388
-
389
- width: 50px;
390
-
391
- background-color: #D9E5FF;
392
-
393
- }
394
-
395
-
396
-
397
- .sb-count-title {
398
-
399
- width: 50px;
400
-
401
- background-color: #F3FFD8;
402
-
403
- }
404
-
405
-
406
-
407
- .result-cells {
408
-
409
- height:40px ;
410
-
411
- }
412
-
413
-
414
-
415
- .self-name {
416
-
417
- height:40px ;
418
-
419
- background-color: #EEEEEE;
420
-
421
- }
422
-
423
-
424
-
425
- .member-list {
426
-
427
- margin-top: 30px;
428
-
429
- }
430
-
431
-
432
-
433
- .member-list-title {
434
-
435
- margin-bottom: 5px;
436
-
437
- }
438
-
439
-
440
-
441
- .member-table td {
442
-
443
- text-align: center;
444
-
445
- }
446
-
447
-
448
-
449
- .member-info {
450
-
451
- height: 30px;
452
-
453
- }
454
-
455
-
456
-
457
- .member-title {
458
-
459
- width: 100px;
460
-
461
- text-align: center;
462
-
463
- background-color: #EEEEEE;
464
-
465
- }
466
-
467
-
468
-
469
- .account-title {
470
-
471
- width: 150px;
472
-
473
- text-align: center;
474
-
475
- }
476
-
477
-
478
-
479
- .achievement-title {
480
-
481
- width: 500px;
482
-
483
- text-align: center;
484
-
485
- }
486
-
487
-
488
-
489
- .member-introduction td {
490
-
491
- height: 30px;
492
-
493
- }
494
-
495
-
496
-
497
- .footer {
498
-
499
-
500
-
501
- }
425
+ ```js
426
+
427
+ // ※リーグ表の中身の定義
428
+
429
+ var json_data = {"_1":{
430
+
431
+ "member":"Aさん",
432
+
433
+ "_1":{"member":"Aさん","WinOrLose":9},
434
+
435
+ "_2":{"member":"Bさん","WinOrLose":0},
436
+
437
+ "_3":{"member":"Cさん","WinOrLose":0},
438
+
439
+ "_4":{"member":"Dさん","WinOrLose":0},
440
+
441
+ "_5":{"member":"Eさん","WinOrLose":0},
442
+
443
+ "_6":{"member":"Fさん","WinOrLose":0},
444
+
445
+ "_7":{"member":"Gさん","WinOrLose":0},
446
+
447
+ "_8":{"member":"Hさん","WinOrLose":0},
448
+
449
+ "_9":{"member":"Iさん","WinOrLose":0},
450
+
451
+ "_10":{"member":"Jさん","WinOrLose":0}
452
+
453
+ },
454
+
455
+
456
+
457
+ // 途中略
458
+
459
+
460
+
461
+ "_10":{
462
+
463
+ "member":"Jさん",
464
+
465
+ "_1":{"member":"Aさん","WinOrLose":0},
466
+
467
+ "_2":{"member":"Bさん","WinOrLose":0},
468
+
469
+ "_3":{"member":"Cさん","WinOrLose":0},
470
+
471
+ "_4":{"member":"Dさん","WinOrLose":0},
472
+
473
+ "_5":{"member":"Eさん","WinOrLose":0},
474
+
475
+ "_6":{"member":"Fさん","WinOrLose":0},
476
+
477
+ "_7":{"member":"Gさん","WinOrLose":0},
478
+
479
+ "_8":{"member":"Hさん","WinOrLose":0},
480
+
481
+ "_9":{"member":"Iさん","WinOrLose":0},
482
+
483
+ "_10":{"member":"Jさん","WinOrLose":9}
484
+
485
+ }
486
+
487
+ };
488
+
489
+
490
+
491
+ // 初期処理
492
+
493
+ function init(){
494
+
495
+ var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
496
+
497
+ // 1行目はヘッダーだから飛ばして
498
+
499
+ for(var itr = 1; itr < trs.length; itr++){
500
+
501
+ // テーブルの行毎に処理
502
+
503
+ var tds = trs[itr].getElementsByTagName('td');
504
+
505
+ for(var itd = 0; itd < tds.length; itd++){
506
+
507
+ if(tds[itd].id.indexOf('op_') != -1){ // idにop_を含む（勝敗記入のtd）
508
+
509
+ // 勝ち負け入力<td>タグの場合
510
+
511
+ var arr = tds[itd].id.split('_'); // op_数字_数字 → [op, 数字, 数字]
512
+
513
+ if(arr[1] == arr[2]){
514
+
515
+ // 対戦が同じ場合
516
+
517
+ tds[itd].classList.add('right_down_border'); // 縦横同値マスにクラスを指定
518
+
519
+ }
520
+
521
+ else {
522
+
523
+ // 対戦が違う場合、イベントを登録
524
+
525
+ // onclick="winorlose_click(this);" と同じ内容
526
+
527
+ tds[itd].addEventListener('click', {name: this, handleEvent: winorlose_click});
528
+
529
+ if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == 1){
530
+
531
+ tds[itd].innerHTML = "○";
532
+
533
+ }
534
+
535
+ else if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == -1) {
536
+
537
+ tds[itd].innerHTML = "●";
538
+
539
+ }
540
+
541
+ }
542
+
543
+ }
544
+
545
+ // else if(tds[itd].id.indexOf('win_') != -1){ // idにwin_を含む（勝ち数のtd）
546
+
547
+ // tds[itd].innerHTML = json_data['_'+ arr[1]]['_'+ arr[2]]["WinCount"];
548
+
549
+ // }
550
+
551
+ // else { // 残るは負け数
552
+
553
+ // tds[itd].innerHTML = json_data['_'+ arr[1]]['_'+ arr[2]]["LoseCount"];
554
+
555
+ // }
556
+
557
+ }
558
+
559
+ }
560
+
561
+ }
562
+
563
+
564
+
565
+ // クリックしたときの処理
566
+
567
+ function winorlose_click(el){
568
+
569
+ const resultId = el.target.getAttribute("data-id");
570
+
571
+ const XHR = new XMLHttpRequest();
572
+
573
+ XHR.open("GET", `/results/${resultId}`, true);
574
+
575
+ XHR.responseType = "json";
576
+
577
+ XHR.send();
578
+
579
+ // el にはどこでクリックされたかの情報が入っている
580
+
581
+ var arr = el.target.id.split('_'); // idを'_'で分ける .targetで親要素イベントも発火
582
+
583
+ var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
584
+
585
+ // 勝敗の記入と取消
586
+
587
+ if(el.target.innerHTML == ''){ // 勝敗を記入
588
+
589
+ el.target.innerHTML = '○'; // 勝ち
590
+
591
+ document.getElementById(oppid).innerHTML = '●'; // 負け
592
+
593
+ }
594
+
595
+ else if(el.target.innerHTML == '○'){ // 勝敗を取消
596
+
597
+ el.target.innerHTML = ''; // 空白
598
+
599
+ document.getElementById(oppid).innerHTML = ''; // 空白
600
+
601
+ }
602
+
603
+ // 勝ち数と負け数の計算
604
+
605
+ var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
606
+
607
+ var win = 0;
608
+
609
+ var lose = 0;
610
+
611
+ // 1行目はヘッダーだから飛ばして
612
+
613
+ for(var itr = 1; itr < trs.length; itr++){
614
+
615
+ // テーブルの行毎に処理
616
+
617
+ win = 0;
618
+
619
+ lose = 0;
620
+
621
+ var tds = trs[itr].getElementsByTagName('td');
622
+
623
+ for(var itd = 0; itd < tds.length; itd++){
624
+
625
+ if(tds[itd].id.indexOf('op_') != -1){
626
+
627
+ // 勝ち負け数カウント
628
+
629
+ if(tds[itd].innerHTML == '○'){
630
+
631
+ win ++;
632
+
633
+ }else if(tds[itd].innerHTML == '●'){
634
+
635
+ lose ++;
636
+
637
+ }
638
+
639
+ } else if(tds[itd].id.indexOf('win_') != -1){
640
+
641
+ // 勝ち表示
642
+
643
+ tds[itd].innerHTML = win;
644
+
645
+ } else if(tds[itd].id.indexOf('lose_') != -1){
646
+
647
+ // 負け表示
648
+
649
+ tds[itd].innerHTML = lose;
650
+
651
+ }
652
+
653
+ }
654
+
655
+ // json_dataの更新？
656
+
657
+ }
658
+
659
+ }
660
+
661
+
662
+
663
+ window.addEventListener("load", init);
502
664
 
503
665
  ```
504
666
 
505
667
 
506
668
 
507
- ```js
508
-
509
- // ※リーグ表の中身の定義
510
-
511
- var json_data = {"_1":{
512
-
513
- "member":"Aさん",
514
-
515
- "_1":{"member":"Aさん","WinOrLose":9},
516
-
517
- "_2":{"member":"Bさん","WinOrLose":0},
518
-
519
- "_3":{"member":"Cさん","WinOrLose":0},
520
-
521
- "_4":{"member":"Dさん","WinOrLose":0},
522
-
523
- "_5":{"member":"Eさん","WinOrLose":0},
524
-
525
- "_6":{"member":"Fさん","WinOrLose":0},
526
-
527
- "_7":{"member":"Gさん","WinOrLose":0},
528
-
529
- "_8":{"member":"Hさん","WinOrLose":0},
530
-
531
- "_9":{"member":"Iさん","WinOrLose":0},
532
-
533
- "_10":{"member":"Jさん","WinOrLose":0}
534
-
535
- },
536
-
537
-
538
-
539
- // 途中略
540
-
541
-
542
-
543
- "_10":{
544
-
545
- "member":"Jさん",
546
-
547
- "_1":{"member":"Aさん","WinOrLose":0},
548
-
549
- "_2":{"member":"Bさん","WinOrLose":0},
550
-
551
- "_3":{"member":"Cさん","WinOrLose":0},
552
-
553
- "_4":{"member":"Dさん","WinOrLose":0},
554
-
555
- "_5":{"member":"Eさん","WinOrLose":0},
556
-
557
- "_6":{"member":"Fさん","WinOrLose":0},
558
-
559
- "_7":{"member":"Gさん","WinOrLose":0},
560
-
561
- "_8":{"member":"Hさん","WinOrLose":0},
562
-
563
- "_9":{"member":"Iさん","WinOrLose":0},
564
-
565
- "_10":{"member":"Jさん","WinOrLose":9}
566
-
567
- }
568
-
569
- };
570
-
571
-
572
-
573
- // 初期処理
574
-
575
- function init(){
576
-
577
- var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
578
-
579
- // 1行目はヘッダーだから飛ばして
580
-
581
- for(var itr = 1; itr < trs.length; itr++){
582
-
583
- // テーブルの行毎に処理
584
-
585
- var tds = trs[itr].getElementsByTagName('td');
586
-
587
- for(var itd = 0; itd < tds.length; itd++){
588
-
589
- if(tds[itd].id.indexOf('op_') != -1){ // idにop_を含む（勝敗記入のtd）
590
-
591
- // 勝ち負け入力<td>タグの場合
592
-
593
- var arr = tds[itd].id.split('_'); // op_数字_数字 → [op, 数字, 数字]
594
-
595
- if(arr[1] == arr[2]){
596
-
597
- // 対戦が同じ場合
598
-
599
- tds[itd].classList.add('right_down_border'); // 縦横同値マスにクラスを指定
600
-
601
- }
602
-
603
- else {
604
-
605
- // 対戦が違う場合、イベントを登録
606
-
607
- // onclick="winorlose_click(this);" と同じ内容
608
-
609
- tds[itd].addEventListener('click', {name: this, handleEvent: winorlose_click});
610
-
611
- if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == 1){
612
-
613
- tds[itd].innerHTML = "○";
614
-
615
- }
616
-
617
- else if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == -1) {
618
-
619
- tds[itd].innerHTML = "●";
620
-
621
- }
622
-
623
- }
624
-
625
- }
626
-
627
- // else if(tds[itd].id.indexOf('win_') != -1){ // idにwin_を含む（勝ち数のtd）
628
-
629
- // tds[itd].innerHTML = json_data['_'+ arr[1]]['_'+ arr[2]]["WinCount"];
630
-
631
- // }
632
-
633
- // else { // 残るは負け数
634
-
635
- // tds[itd].innerHTML = json_data['_'+ arr[1]]['_'+ arr[2]]["LoseCount"];
636
-
637
- // }
638
-
639
- }
640
-
641
- }
642
-
643
- }
644
-
645
-
646
-
647
- // クリックしたときの処理
648
-
649
- function winorlose_click(el){
650
-
651
- // el にはどこでクリックされたかの情報が入っている
652
-
653
- var arr = el.target.id.split('_'); // idを'_'で分ける .targetで親要素イベントも発火
654
-
655
- var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
656
-
657
- // 勝敗の記入と取消
658
-
659
- if(el.target.innerHTML == ''){ // 勝敗を記入
660
-
661
- el.target.innerHTML = '○'; // 勝ち
662
-
663
- document.getElementById(oppid).innerHTML = '●'; // 負け
664
-
665
- }
666
-
667
- else if(el.target.innerHTML == '○'){ // 勝敗を取消
668
-
669
- el.target.innerHTML = ''; // 空白
670
-
671
- document.getElementById(oppid).innerHTML = ''; // 空白
672
-
673
- }
674
-
675
- // 勝ち数と負け数の計算
676
-
677
- var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
678
-
679
- var win = 0;
680
-
681
- var lose = 0;
682
-
683
- // 1行目はヘッダーだから飛ばして
684
-
685
- for(var itr = 1; itr < trs.length; itr++){
686
-
687
- // テーブルの行毎に処理
688
-
689
- win = 0;
690
-
691
- lose = 0;
692
-
693
- var tds = trs[itr].getElementsByTagName('td');
694
-
695
- for(var itd = 0; itd < tds.length; itd++){
696
-
697
- if(tds[itd].id.indexOf('op_') != -1){
698
-
699
- // 勝ち負け数カウント
700
-
701
- if(tds[itd].innerHTML == '○'){
702
-
703
- win ++;
704
-
705
- }else if(tds[itd].innerHTML == '●'){
706
-
707
- lose ++;
708
-
709
- }
710
-
711
- } else if(tds[itd].id.indexOf('win_') != -1){
712
-
713
- // 勝ち表示
714
-
715
- tds[itd].innerHTML = win;
716
-
717
- } else if(tds[itd].id.indexOf('lose_') != -1){
718
-
719
- // 負け表示
720
-
721
- tds[itd].innerHTML = lose;
722
-
723
- }
724
-
725
- }
726
-
727
- // json_dataの更新？
728
-
729
- }
730
-
731
- }
732
-
733
-
734
-
735
- window.addEventListener("load", init);
736
-
737
- ```
738
-
739
-
740
-
741
669
  # 調べた内容
742
670
 
743
671
  ・[Rails]　Ajaxを用いて非同期通信でチャットメッセージを送る

7

JSON.parseでパラメーターをHashに変換

2020/10/12 05:58

投稿

Zengo_Master
Zengo_Master

スコア19

test CHANGED
File without changes
test CHANGED
@@ -58,6 +58,22 @@
58
58
 
59
59
  ```ruby
60
60
 
61
+ Rails.application.routes.draw do
62
+
63
+ get 'json_p/parse'
64
+
65
+ root to: 'results#index'
66
+
67
+ post 'json_p/parse'
68
+
69
+ end
70
+
71
+ ```
72
+
73
+
74
+
75
+ ```ruby
76
+
61
77
  class ResultsController < ApplicationController
62
78
 
63
79
 
@@ -70,36 +86,44 @@
70
86
 
71
87
 
72
88
 
73
- # def win_or_lose
74
-
75
- # result = Result.find(params[:id])
76
-
77
- # binding.pry
78
-
79
- # if result.op_2 == nil
80
-
81
- # result.update(op_2: "○")
82
-
83
- # else result.op_2 == "○"
84
-
85
- # result.update(op_2: nil)
86
-
87
- # end
88
-
89
- # item = Result.find(params[:id])
90
-
91
- # render json: { result: item }
92
-
93
- # end
94
-
95
-
96
-
97
89
  end
98
90
 
99
91
  ```
100
92
 
101
93
 
102
94
 
95
+ ```ruby
96
+
97
+ class JsonPController < ApplicationController
98
+
99
+ def parse
100
+
101
+ json_str = request.body.read # リクエストのJSON
102
+
103
+ json_hash = JSON.parse(json_data,symbolize_names: true) # Hashに変換
104
+
105
+
106
+
107
+ # 見やすいように整形
108
+
109
+ response_str =
110
+
111
+ "JSON: " + json_str + "n" +
112
+
113
+ "Hash: " + json_hash.to_s + "n"
114
+
115
+
116
+
117
+ render plain: response_str
118
+
119
+ end
120
+
121
+ end
122
+
123
+ ```
124
+
125
+
126
+
103
127
  ```html
104
128
 
105
129
  <div class="header">

6

ビューの微修正

2020/10/01 14:44

投稿

Zengo_Master
Zengo_Master

スコア19

test CHANGED
File without changes
test CHANGED
@@ -148,10 +148,10 @@
148
148
 
149
149
  <tr class="result-cells">
150
150
 
151
+ <td id="rank_<%= i + 1 %>"></td>
152
+
151
153
  <td class="self-name"><%= member.name %></td>
152
154
 
153
- <td id="rank_<%= i + 1 %>"></td>
154
-
155
155
  <td id="op_<%= i + 1 %>_1"></td>
156
156
 
157
157
  <td id="op_<%= i + 1 %>_2"></td>

5

データベース設計の修正と、それに伴う他ファイルの修正

2020/10/01 04:34

投稿

Zengo_Master
Zengo_Master

スコア19

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,31 @@
24
24
 
25
25
  # データベース設計
26
26
 
27
+ membersテーブル(10人)
28
+
29
+ ・メンバーID
30
+
31
+ ・メンバー名
32
+
33
+ ・アカウント
34
+
35
+ ・実績
36
+
37
+ ・勝ち数
38
+
39
+ ・負け数
40
+
41
+ ・SB
42
+
43
+
44
+
27
- ![イメージ説明](696a9027dada54db5e1be8fdb1288609.png)
45
+ resultsテーブル(1人に対して9人(10人))
46
+
47
+ ・メンバーID
48
+
49
+ ・対戦相手ID
50
+
51
+ ・勝敗
28
52
 
29
53
 
30
54
 
@@ -34,11 +58,41 @@
34
58
 
35
59
  ```ruby
36
60
 
37
- Rails.application.routes.draw do
61
+ class ResultsController < ApplicationController
62
+
63
+
64
+
38
-
65
+ def index
66
+
67
+ @members = Member.all
68
+
69
+ end
70
+
71
+
72
+
73
+ # def win_or_lose
74
+
75
+ # result = Result.find(params[:id])
76
+
77
+ # binding.pry
78
+
79
+ # if result.op_2 == nil
80
+
81
+ # result.update(op_2: "○")
82
+
83
+ # else result.op_2 == "○"
84
+
85
+ # result.update(op_2: nil)
86
+
87
+ # end
88
+
39
- root to: 'results#index'
89
+ # item = Result.find(params[:id])
40
-
90
+
41
- get 'results/:id', to: 'results#win_or_lose'
91
+ # render json: { result: item }
92
+
93
+ # end
94
+
95
+
42
96
 
43
97
  end
44
98
 
@@ -46,636 +100,620 @@
46
100
 
47
101
 
48
102
 
49
- ```ruby
50
-
51
- class ResultsController < ApplicationController
52
-
53
-
54
-
55
- def index
56
-
57
- @results = Result.all
58
-
59
- end
60
-
61
-
62
-
63
- # def win_or_lose
64
-
65
- # result = Result.find(params[:id])
66
-
67
- # if result.クリックしたtdのop == ""
68
-
69
- # result.update(クリックしたtdのop: "○")
70
-
71
- # else result.クリックしたtdのop == "○"
72
-
73
- # result.update(クリックしたtdのop: "")
74
-
75
- # end
76
-
77
- # item = Result.find(params[:id])
78
-
79
- # render json: { result: item }
80
-
81
- # end
82
-
83
-
84
-
85
- end
103
+ ```html
104
+
105
+ <div class="header">
106
+
107
+ <h1 class="title">第7回しゅが研<span>毎週金曜日20時〜</span></h1>
108
+
109
+ </div>
110
+
111
+
112
+
113
+ <div class="main">
114
+
115
+ <div class="league-table">
116
+
117
+ <h2 class="league-table-title">【リーグ表】</h2>
118
+
119
+ <table id="winorlose_table" border="2" bordercolor="black" style="border-collapse: collapse">
120
+
121
+ <tr class="top-title">
122
+
123
+ <th class="rank-title">順位</th>
124
+
125
+ <th class="player-title">対局者</th>
126
+
127
+
128
+
129
+ <% @members.each do |member| %>
130
+
131
+ <td class="opponent-name"><%= member.name %></td>
132
+
133
+ <% end %>
134
+
135
+
136
+
137
+ <th class="win-count-title">勝</th>
138
+
139
+ <th class="lose-count-title">負</th>
140
+
141
+ <th class="sb-count-title">SB</th>
142
+
143
+ </tr>
144
+
145
+
146
+
147
+ <% @members.each_with_index do |member, i| %>
148
+
149
+ <tr class="result-cells">
150
+
151
+ <td class="self-name"><%= member.name %></td>
152
+
153
+ <td id="rank_<%= i + 1 %>"></td>
154
+
155
+ <td id="op_<%= i + 1 %>_1"></td>
156
+
157
+ <td id="op_<%= i + 1 %>_2"></td>
158
+
159
+ <td id="op_<%= i + 1 %>_3"></td>
160
+
161
+ <td id="op_<%= i + 1 %>_4"></td>
162
+
163
+ <td id="op_<%= i + 1 %>_5"></td>
164
+
165
+ <td id="op_<%= i + 1 %>_6"></td>
166
+
167
+ <td id="op_<%= i + 1 %>_7"></td>
168
+
169
+ <td id="op_<%= i + 1 %>_8"></td>
170
+
171
+ <td id="op_<%= i + 1 %>_9"></td>
172
+
173
+ <td id="op_<%= i + 1 %>_10"></td>
174
+
175
+ <td id="win_<%= i + 1 %>">0</td>
176
+
177
+ <td id="lose_<%= i + 1 %>">0</td>
178
+
179
+ <td id="sb_<%= i + 1 %>">0</td>
180
+
181
+ </tr>
182
+
183
+ <% end %>
184
+
185
+
186
+
187
+ </table>
188
+
189
+ </div>
190
+
191
+
192
+
193
+ <div class="member-list">
194
+
195
+ <h2 class="member-list-title">【対局者紹介】</h2>
196
+
197
+ <table border="2" bordercolor="black" style="border-collapse: collapse" class="member-table">
198
+
199
+
200
+
201
+ <tr class="member-info">
202
+
203
+ <th class="member-title">対局者</th>
204
+
205
+ <th class="account-title">アカウント</th>
206
+
207
+ <th class="achievement-title">実績</th>
208
+
209
+ </tr>
210
+
211
+
212
+
213
+ <% @members.each do |member| %>
214
+
215
+ <tr class="member-introduction">
216
+
217
+ <td class="member"><%= member.name %></td>
218
+
219
+ <td class="account"><%= member.account %></td>
220
+
221
+ <td class="achievement"><%= member.achievement %></td>
222
+
223
+ </tr>
224
+
225
+ <% end %>
226
+
227
+
228
+
229
+ </table>
230
+
231
+ </div>
232
+
233
+ </div>
234
+
235
+ </div>
236
+
237
+
238
+
239
+ <div class="footer">
240
+
241
+ <div>
242
+
243
+ </div>
244
+
245
+ </div>
86
246
 
87
247
  ```
88
248
 
89
249
 
90
250
 
91
- ```html
92
-
93
- <div class="header">
94
-
95
- <h1 class="title">第7回しゅが研</h1>
96
-
97
- </div>
98
-
99
-
100
-
101
- <div class="main">
102
-
103
- <div class="league-table">
104
-
105
- <h2 class="league-table-title">リーグ表</h2>
106
-
107
- <table id="winorlose_table" border="2" bordercolor="black" style="border-collapse: collapse">
108
-
109
- <tr class="top-title">
110
-
111
- <th class="rank-title">順位</th>
112
-
113
- <th class="player-title">対局者</th>
114
-
115
-
116
-
117
- <% @results.each do |result| %>
118
-
119
- <td class="opponent-name"><%= result.player %></td>
120
-
121
- <% end %>
122
-
123
-
124
-
125
- <th class="win-count-title">勝</th>
126
-
127
- <th class="lose-count-title">負</th>
128
-
129
- <th class="sb-count-title">SB</th>
130
-
131
- </tr>
132
-
133
-
134
-
135
- <% @results.each_with_index do |result, i| %>
136
-
137
- <tr class="result-cells">
138
-
139
- <td class="rank"></td>
140
-
141
- <td class="self-name"><%= result.player %></td>
142
-
143
- <td id="op_<%= i + 1 %>_1" data-id=<%= result.id %> data-result=<%= result.op_1 %>><%= result.op_1 %></td>
144
-
145
-
146
-
147
- <%# 途中略 2~9を記述%>
148
-
149
-
150
-
151
- <td id="op_<%= i + 1 %>_10" data-id=<%= result.id %> data-result=<%= result.op_10 %>><%= result.op_10 %></td>
152
-
153
- <td id="win_<%= i + 1 %>">0</td>
154
-
155
- <td id="lose_<%= i + 1 %>">0</td>
156
-
157
- <td id="sb_<%= i + 1 %>">0</td>
158
-
159
- </tr>
160
-
161
- <% end %>
162
-
163
-
164
-
165
- </table>
166
-
167
- </div>
168
-
169
-
170
-
171
- <div class="member-list">
172
-
173
- <h2 class="member-list-title">対局者紹介</h2>
174
-
175
- <table border="2" bordercolor="black" style="border-collapse: collapse" class="member-table">
176
-
177
-
178
-
179
- <tr class="member-info">
180
-
181
- <th class="member-title">対局者</th>
182
-
183
- <th class="account-title">アカウント</th>
184
-
185
- <th class="achievement-title">実績</th>
186
-
187
- </tr>
188
-
189
-
190
-
191
- <% @results.each do |result| %>
192
-
193
- <tr class="member-introduction">
194
-
195
- <td class="member"><%= result.player %></td>
196
-
197
- <td class="account"><%= result.account %></td>
198
-
199
- <td class="achievement"><%= result.achievement %></td>
200
-
201
- </tr>
202
-
203
- <% end %>
204
-
205
-
206
-
207
- </table>
208
-
209
- </div>
210
-
211
- </div>
212
-
213
- </div>
251
+ ```css
252
+
253
+ .header {
254
+
255
+ margin: 20px;
256
+
257
+ padding-bottom: 5px;
258
+
259
+ border-bottom: 2px solid lightgray;
260
+
261
+ }
262
+
263
+
264
+
265
+ .header span {
266
+
267
+ padding-left: 20px;
268
+
269
+ font-size: 25px;
270
+
271
+ }
272
+
273
+
274
+
275
+ .main {
276
+
277
+ margin: 30px;
278
+
279
+ }
280
+
281
+
282
+
283
+ .league-table {
284
+
285
+ margin-top: 20px;
286
+
287
+ }
288
+
289
+
290
+
291
+ .league-table-title {
292
+
293
+ margin-bottom: 5px;
294
+
295
+ }
296
+
297
+
298
+
299
+ .league-table td {
300
+
301
+ text-align: center;
302
+
303
+ }
304
+
305
+
306
+
307
+ .right_down_border {
308
+
309
+ background-image: linear-gradient(to top right, transparent, transparent 48%, black 49%, black 51%, transparent 52%, transparent);
310
+
311
+ }
312
+
313
+
314
+
315
+ .top-title {
316
+
317
+ height: 30px;
318
+
319
+ }
320
+
321
+
322
+
323
+ .rank-title {
324
+
325
+ width: 50px;
326
+
327
+ background-color: #FFFFAA;
328
+
329
+ }
330
+
331
+
332
+
333
+ .player-title {
334
+
335
+ width: 80px;
336
+
337
+ background-color: #EEEEEE;
338
+
339
+ }
340
+
341
+
342
+
343
+ .opponent-name {
344
+
345
+ width: 80px;
346
+
347
+ background-color: #EEEEEE;
348
+
349
+ }
350
+
351
+
352
+
353
+ .win-count-title {
354
+
355
+ width: 50px;
356
+
357
+ background-color: #FFD5EC;
358
+
359
+ }
360
+
361
+
362
+
363
+ .lose-count-title {
364
+
365
+ width: 50px;
366
+
367
+ background-color: #D9E5FF;
368
+
369
+ }
370
+
371
+
372
+
373
+ .sb-count-title {
374
+
375
+ width: 50px;
376
+
377
+ background-color: #F3FFD8;
378
+
379
+ }
380
+
381
+
382
+
383
+ .result-cells {
384
+
385
+ height:40px ;
386
+
387
+ }
388
+
389
+
390
+
391
+ .self-name {
392
+
393
+ height:40px ;
394
+
395
+ background-color: #EEEEEE;
396
+
397
+ }
398
+
399
+
400
+
401
+ .member-list {
402
+
403
+ margin-top: 30px;
404
+
405
+ }
406
+
407
+
408
+
409
+ .member-list-title {
410
+
411
+ margin-bottom: 5px;
412
+
413
+ }
414
+
415
+
416
+
417
+ .member-table td {
418
+
419
+ text-align: center;
420
+
421
+ }
422
+
423
+
424
+
425
+ .member-info {
426
+
427
+ height: 30px;
428
+
429
+ }
430
+
431
+
432
+
433
+ .member-title {
434
+
435
+ width: 100px;
436
+
437
+ text-align: center;
438
+
439
+ background-color: #EEEEEE;
440
+
441
+ }
442
+
443
+
444
+
445
+ .account-title {
446
+
447
+ width: 150px;
448
+
449
+ text-align: center;
450
+
451
+ }
452
+
453
+
454
+
455
+ .achievement-title {
456
+
457
+ width: 500px;
458
+
459
+ text-align: center;
460
+
461
+ }
462
+
463
+
464
+
465
+ .member-introduction td {
466
+
467
+ height: 30px;
468
+
469
+ }
470
+
471
+
472
+
473
+ .footer {
474
+
475
+
476
+
477
+ }
214
478
 
215
479
  ```
216
480
 
217
481
 
218
482
 
219
- ```css
220
-
221
- .header {
222
-
223
- margin: 20px;
224
-
225
- }
226
-
227
-
228
-
229
- .main {
230
-
231
- margin: 20px;
232
-
233
- }
234
-
235
-
236
-
237
- .league-table {
238
-
239
- margin-top: 20px;
240
-
241
- }
242
-
243
-
244
-
245
- .league-table-title {
246
-
247
- margin-bottom: 5px;
248
-
249
- }
250
-
251
-
252
-
253
- .league-table td {
254
-
255
- text-align: center;
256
-
257
- }
258
-
259
-
260
-
261
- .right_down_border {
262
-
263
- background-image: linear-gradient(to top right, transparent, transparent 48%, black 49%, black 51%, transparent 52%, transparent);
264
-
265
- }
266
-
267
-
268
-
269
- .top-title {
270
-
271
- height: 30px;
272
-
273
- }
274
-
275
-
276
-
277
- .rank-title {
278
-
279
- width: 50px;
280
-
281
- background-color: #FFFFAA;
282
-
283
- }
284
-
285
-
286
-
287
- .player-title {
288
-
289
- width: 80px;
290
-
291
- background-color: #EEEEEE;
292
-
293
- }
294
-
295
-
296
-
297
- .opponent-name {
298
-
299
- width: 80px;
300
-
301
- background-color: #EEEEEE;
302
-
303
- }
304
-
305
-
306
-
307
- .win-count-title {
308
-
309
- width: 50px;
310
-
311
- background-color: #FFD5EC;
312
-
313
- }
314
-
315
-
316
-
317
- .lose-count-title {
318
-
319
- width: 50px;
320
-
321
- background-color: #D9E5FF;
322
-
323
- }
324
-
325
-
326
-
327
- .sb-count-title {
328
-
329
- width: 50px;
330
-
331
- background-color: #F3FFD8;
332
-
333
- }
334
-
335
-
336
-
337
- .result-cells {
338
-
339
- height:40px ;
340
-
341
- }
342
-
343
-
344
-
345
- .self-name {
346
-
347
- height:40px ;
348
-
349
- background-color: #EEEEEE;
350
-
351
- }
352
-
353
-
354
-
355
- .member-list {
356
-
357
- margin-top: 30px;
358
-
359
- }
360
-
361
-
362
-
363
- .member-list-title {
364
-
365
- margin-bottom: 5px;
366
-
367
- }
368
-
369
-
370
-
371
- .member-table td {
372
-
373
- text-align: center;
374
-
375
- }
376
-
377
-
378
-
379
- .member-info {
380
-
381
- height: 30px;
382
-
383
- }
384
-
385
-
386
-
387
- .member-title {
388
-
389
- width: 100px;
390
-
391
- text-align: center;
392
-
393
- background-color: #EEEEEE;
394
-
395
- }
396
-
397
-
398
-
399
- .account-title {
400
-
401
- width: 150px;
402
-
403
- text-align: center;
404
-
405
- }
406
-
407
-
408
-
409
- .achievement-title {
410
-
411
- width: 500px;
412
-
413
- text-align: center;
414
-
415
- }
416
-
417
-
418
-
419
- .member-introduction td {
420
-
421
- height: 30px;
422
-
423
- }
483
+ ```js
484
+
485
+ // ※リーグ表の中身の定義
486
+
487
+ var json_data = {"_1":{
488
+
489
+ "member":"Aさん",
490
+
491
+ "_1":{"member":"Aさん","WinOrLose":9},
492
+
493
+ "_2":{"member":"Bさん","WinOrLose":0},
494
+
495
+ "_3":{"member":"Cさん","WinOrLose":0},
496
+
497
+ "_4":{"member":"Dさん","WinOrLose":0},
498
+
499
+ "_5":{"member":"Eさん","WinOrLose":0},
500
+
501
+ "_6":{"member":"Fさん","WinOrLose":0},
502
+
503
+ "_7":{"member":"Gさん","WinOrLose":0},
504
+
505
+ "_8":{"member":"Hさん","WinOrLose":0},
506
+
507
+ "_9":{"member":"Iさん","WinOrLose":0},
508
+
509
+ "_10":{"member":"Jさん","WinOrLose":0}
510
+
511
+ },
512
+
513
+
514
+
515
+ // 途中略
516
+
517
+
518
+
519
+ "_10":{
520
+
521
+ "member":"Jさん",
522
+
523
+ "_1":{"member":"Aさん","WinOrLose":0},
524
+
525
+ "_2":{"member":"Bさん","WinOrLose":0},
526
+
527
+ "_3":{"member":"Cさん","WinOrLose":0},
528
+
529
+ "_4":{"member":"Dさん","WinOrLose":0},
530
+
531
+ "_5":{"member":"Eさん","WinOrLose":0},
532
+
533
+ "_6":{"member":"Fさん","WinOrLose":0},
534
+
535
+ "_7":{"member":"Gさん","WinOrLose":0},
536
+
537
+ "_8":{"member":"Hさん","WinOrLose":0},
538
+
539
+ "_9":{"member":"Iさん","WinOrLose":0},
540
+
541
+ "_10":{"member":"Jさん","WinOrLose":9}
542
+
543
+ }
544
+
545
+ };
546
+
547
+
548
+
549
+ // 初期処理
550
+
551
+ function init(){
552
+
553
+ var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
554
+
555
+ // 1行目はヘッダーだから飛ばして
556
+
557
+ for(var itr = 1; itr < trs.length; itr++){
558
+
559
+ // テーブルの行毎に処理
560
+
561
+ var tds = trs[itr].getElementsByTagName('td');
562
+
563
+ for(var itd = 0; itd < tds.length; itd++){
564
+
565
+ if(tds[itd].id.indexOf('op_') != -1){ // idにop_を含む（勝敗記入のtd）
566
+
567
+ // 勝ち負け入力<td>タグの場合
568
+
569
+ var arr = tds[itd].id.split('_'); // op_数字_数字 → [op, 数字, 数字]
570
+
571
+ if(arr[1] == arr[2]){
572
+
573
+ // 対戦が同じ場合
574
+
575
+ tds[itd].classList.add('right_down_border'); // 縦横同値マスにクラスを指定
576
+
577
+ }
578
+
579
+ else {
580
+
581
+ // 対戦が違う場合、イベントを登録
582
+
583
+ // onclick="winorlose_click(this);" と同じ内容
584
+
585
+ tds[itd].addEventListener('click', {name: this, handleEvent: winorlose_click});
586
+
587
+ if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == 1){
588
+
589
+ tds[itd].innerHTML = "○";
590
+
591
+ }
592
+
593
+ else if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == -1) {
594
+
595
+ tds[itd].innerHTML = "●";
596
+
597
+ }
598
+
599
+ }
600
+
601
+ }
602
+
603
+ // else if(tds[itd].id.indexOf('win_') != -1){ // idにwin_を含む（勝ち数のtd）
604
+
605
+ // tds[itd].innerHTML = json_data['_'+ arr[1]]['_'+ arr[2]]["WinCount"];
606
+
607
+ // }
608
+
609
+ // else { // 残るは負け数
610
+
611
+ // tds[itd].innerHTML = json_data['_'+ arr[1]]['_'+ arr[2]]["LoseCount"];
612
+
613
+ // }
614
+
615
+ }
616
+
617
+ }
618
+
619
+ }
620
+
621
+
622
+
623
+ // クリックしたときの処理
624
+
625
+ function winorlose_click(el){
626
+
627
+ // el にはどこでクリックされたかの情報が入っている
628
+
629
+ var arr = el.target.id.split('_'); // idを'_'で分ける .targetで親要素イベントも発火
630
+
631
+ var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
632
+
633
+ // 勝敗の記入と取消
634
+
635
+ if(el.target.innerHTML == ''){ // 勝敗を記入
636
+
637
+ el.target.innerHTML = '○'; // 勝ち
638
+
639
+ document.getElementById(oppid).innerHTML = '●'; // 負け
640
+
641
+ }
642
+
643
+ else if(el.target.innerHTML == '○'){ // 勝敗を取消
644
+
645
+ el.target.innerHTML = ''; // 空白
646
+
647
+ document.getElementById(oppid).innerHTML = ''; // 空白
648
+
649
+ }
650
+
651
+ // 勝ち数と負け数の計算
652
+
653
+ var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
654
+
655
+ var win = 0;
656
+
657
+ var lose = 0;
658
+
659
+ // 1行目はヘッダーだから飛ばして
660
+
661
+ for(var itr = 1; itr < trs.length; itr++){
662
+
663
+ // テーブルの行毎に処理
664
+
665
+ win = 0;
666
+
667
+ lose = 0;
668
+
669
+ var tds = trs[itr].getElementsByTagName('td');
670
+
671
+ for(var itd = 0; itd < tds.length; itd++){
672
+
673
+ if(tds[itd].id.indexOf('op_') != -1){
674
+
675
+ // 勝ち負け数カウント
676
+
677
+ if(tds[itd].innerHTML == '○'){
678
+
679
+ win ++;
680
+
681
+ }else if(tds[itd].innerHTML == '●'){
682
+
683
+ lose ++;
684
+
685
+ }
686
+
687
+ } else if(tds[itd].id.indexOf('win_') != -1){
688
+
689
+ // 勝ち表示
690
+
691
+ tds[itd].innerHTML = win;
692
+
693
+ } else if(tds[itd].id.indexOf('lose_') != -1){
694
+
695
+ // 負け表示
696
+
697
+ tds[itd].innerHTML = lose;
698
+
699
+ }
700
+
701
+ }
702
+
703
+ // json_dataの更新？
704
+
705
+ }
706
+
707
+ }
708
+
709
+
710
+
711
+ window.addEventListener("load", init);
424
712
 
425
713
  ```
426
714
 
427
715
 
428
716
 
429
- ```js
430
-
431
- // ※リーグ表の中身の定義
432
-
433
- var json_data = {"_1":{
434
-
435
- "member":"Aさん",
436
-
437
- "_1":{"member":"Aさん","WinOrLose":9},
438
-
439
- "_2":{"member":"Bさん","WinOrLose":0},
440
-
441
- "_3":{"member":"Cさん","WinOrLose":0},
442
-
443
- "_4":{"member":"Dさん","WinOrLose":0},
444
-
445
- "_5":{"member":"Eさん","WinOrLose":0},
446
-
447
- "_6":{"member":"Fさん","WinOrLose":0},
448
-
449
- "_7":{"member":"Gさん","WinOrLose":0},
450
-
451
- "_8":{"member":"Hさん","WinOrLose":0},
452
-
453
- "_9":{"member":"Iさん","WinOrLose":0},
454
-
455
- "_10":{"member":"Jさん","WinOrLose":0}
456
-
457
- },
458
-
459
-
460
-
461
- // 途中略
462
-
463
-
464
-
465
- "_10":{
466
-
467
- "member":"Jさん",
468
-
469
- "_1":{"member":"Aさん","WinOrLose":0},
470
-
471
- "_2":{"member":"Bさん","WinOrLose":0},
472
-
473
- "_3":{"member":"Cさん","WinOrLose":0},
474
-
475
- "_4":{"member":"Dさん","WinOrLose":0},
476
-
477
- "_5":{"member":"Eさん","WinOrLose":0},
478
-
479
- "_6":{"member":"Fさん","WinOrLose":0},
480
-
481
- "_7":{"member":"Gさん","WinOrLose":0},
482
-
483
- "_8":{"member":"Hさん","WinOrLose":0},
484
-
485
- "_9":{"member":"Iさん","WinOrLose":0},
486
-
487
- "_10":{"member":"Jさん","WinOrLose":9}
488
-
489
- }
490
-
491
- };
492
-
493
-
494
-
495
- // 初期処理
496
-
497
- function init(){
498
-
499
- var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
500
-
501
- // 1行目はヘッダーだから飛ばして
502
-
503
- for(var itr = 1; itr < trs.length; itr++){
504
-
505
- // テーブルの行毎に処理
506
-
507
- var tds = trs[itr].getElementsByTagName('td');
508
-
509
- for(var itd = 0; itd < tds.length; itd++){
510
-
511
- if(tds[itd].id.indexOf('op_') != -1){
512
-
513
- // 勝ち負け入力<td>タグの場合
514
-
515
- var arr = tds[itd].id.split('_'); // op_数字_数字 → [op, 数字, 数字]
516
-
517
- if(arr[1] == arr[2]){
518
-
519
- // 対戦が同じ場合
520
-
521
- tds[itd].classList.add('right_down_border'); // 縦横同値マスにクラスを指定
522
-
523
- }
524
-
525
- else {
526
-
527
- // 対戦が違う場合、イベントを登録
528
-
529
- // onclick="winorlose_click(this);" と同じ内容
530
-
531
- tds[itd].addEventListener('click', {name: this, handleEvent: winorlose_click});
532
-
533
- if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == 1){
534
-
535
- tds[itd].innerHTML = "○";
536
-
537
- }
538
-
539
- else if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == -1) {
540
-
541
- tds[itd].innerHTML = "●";
542
-
543
- }
544
-
545
- }
546
-
547
- }
548
-
549
- }
550
-
551
- }
552
-
553
- }
554
-
555
-
556
-
557
- // クリックしたときの処理
558
-
559
- function winorlose_click(el){
560
-
561
- // el にはどこでクリックされたかの情報が入っている
562
-
563
- const resultId = el.target.getAttribute("data-id");
564
-
565
- const XHR = new XMLHttpRequest();
566
-
567
- XHR.open("GET", `/results/${resultId}`, true);
568
-
569
- XHR.responseType = "json";
570
-
571
- XHR.send();
572
-
573
- XHR.onload = () => {
574
-
575
- const item = XHR.response.el.target;
576
-
577
- if (item === "") {
578
-
579
- el.setAttribute("data-result", "○");
580
-
581
- }
582
-
583
- else if (item === "○") {
584
-
585
- el.setAttribute("data-result", "");
586
-
587
- }
588
-
589
- };
590
-
591
- // el にはどこでクリックされたかの情報が入っている
592
-
593
- var arr = el.target.id.split('_'); // idを'_'で分ける .targetで親要素イベントも発火
594
-
595
- var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
596
-
597
- // 勝敗の記入と取消
598
-
599
- if(el.target.innerHTML == ''){ // 勝敗を記入
600
-
601
- el.target.innerHTML = '○'; // 勝ち
602
-
603
- document.getElementById(oppid).innerHTML = '●'; // 負け
604
-
605
- }
606
-
607
- else if(el.target.innerHTML == '○'){ // 勝敗を取消
608
-
609
- el.target.innerHTML = ''; // 空白
610
-
611
- document.getElementById(oppid).innerHTML = ''; // 空白
612
-
613
- }
614
-
615
- // 勝ち数と負け数の計算
616
-
617
- var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
618
-
619
- var win = 0;
620
-
621
- var lose = 0;
622
-
623
- // 1行目はヘッダーだから飛ばして
624
-
625
- for(var itr = 1; itr < trs.length; itr++){
626
-
627
- // テーブルの行毎に処理
628
-
629
- win = 0;
630
-
631
- lose = 0;
632
-
633
- var tds = trs[itr].getElementsByTagName('td');
634
-
635
- for(var itd = 0; itd < tds.length; itd++){
636
-
637
- if(tds[itd].id.indexOf('op_') != -1){
638
-
639
- // 勝ち負け数カウント
640
-
641
- if(tds[itd].innerHTML == '○'){
642
-
643
- win ++;
644
-
645
- }else if(tds[itd].innerHTML == '●'){
646
-
647
- lose ++;
648
-
649
- }
650
-
651
- } else if(tds[itd].id.indexOf('win_') != -1){
652
-
653
- // 勝ち表示
654
-
655
- tds[itd].innerHTML = win;
656
-
657
- } else if(tds[itd].id.indexOf('lose_') != -1){
658
-
659
- // 負け表示
660
-
661
- tds[itd].innerHTML = lose;
662
-
663
- }
664
-
665
- }
666
-
667
- }
668
-
669
- }
670
-
671
-
672
-
673
- window.addEventListener("load", init);
674
-
675
- ```
676
-
677
-
678
-
679
717
  # 調べた内容
680
718
 
681
719
  ・[Rails]　Ajaxを用いて非同期通信でチャットメッセージを送る

4

routes.rbの追加

2020/10/01 04:19

投稿

Zengo_Master
Zengo_Master

スコア19

test CHANGED
File without changes
test CHANGED
@@ -30,8 +30,24 @@
30
30
 
31
31
  # 現在のコード
32
32
 
33
+
34
+
33
35
  ```ruby
34
36
 
37
+ Rails.application.routes.draw do
38
+
39
+ root to: 'results#index'
40
+
41
+ get 'results/:id', to: 'results#win_or_lose'
42
+
43
+ end
44
+
45
+ ```
46
+
47
+
48
+
49
+ ```ruby
50
+
35
51
  class ResultsController < ApplicationController
36
52
 
37
53
 

3

コードの更新

2020/09/30 07:43

投稿

Zengo_Master
Zengo_Master

スコア19

test CHANGED
File without changes
test CHANGED
@@ -30,6 +30,48 @@
30
30
 
31
31
  # 現在のコード
32
32
 
33
+ ```ruby
34
+
35
+ class ResultsController < ApplicationController
36
+
37
+
38
+
39
+ def index
40
+
41
+ @results = Result.all
42
+
43
+ end
44
+
45
+
46
+
47
+ # def win_or_lose
48
+
49
+ # result = Result.find(params[:id])
50
+
51
+ # if result.クリックしたtdのop == ""
52
+
53
+ # result.update(クリックしたtdのop: "○")
54
+
55
+ # else result.クリックしたtdのop == "○"
56
+
57
+ # result.update(クリックしたtdのop: "")
58
+
59
+ # end
60
+
61
+ # item = Result.find(params[:id])
62
+
63
+ # render json: { result: item }
64
+
65
+ # end
66
+
67
+
68
+
69
+ end
70
+
71
+ ```
72
+
73
+
74
+
33
75
  ```html
34
76
 
35
77
  <div class="header">
@@ -82,25 +124,15 @@
82
124
 
83
125
  <td class="self-name"><%= result.player %></td>
84
126
 
85
- <td id="op_<%= i + 1 %>_1"><%= result.op_1 %></td>
127
+ <td id="op_<%= i + 1 %>_1" data-id=<%= result.id %> data-result=<%= result.op_1 %>><%= result.op_1 %></td>
86
-
128
+
129
+
130
+
87
- <td id="op_<%= i + 1 %>_2"><%= result.op_2 %></td>
131
+ <%# 途中略 2~9を記述%>
88
-
89
- <td id="op_<%= i + 1 %>_3"><%= result.op_3 %></td>
132
+
90
-
91
- <td id="op_<%= i + 1 %>_4"><%= result.op_4 %></td>
133
+
92
-
93
- <td id="op_<%= i + 1 %>_5"><%= result.op_5 %></td>
134
+
94
-
95
- <td id="op_<%= i + 1 %>_6"><%= result.op_6 %></td>
96
-
97
- <td id="op_<%= i + 1 %>_7"><%= result.op_7 %></td>
98
-
99
- <td id="op_<%= i + 1 %>_8"><%= result.op_8 %></td>
100
-
101
- <td id="op_<%= i + 1 %>_9"><%= result.op_9 %></td>
102
-
103
- <td id="op_<%= i + 1 %>_10"><%= result.op_10 %></td>
135
+ <td id="op_<%= i + 1 %>_10" data-id=<%= result.id %> data-result=<%= result.op_10 %>><%= result.op_10 %></td>
104
136
 
105
137
  <td id="win_<%= i + 1 %>">0</td>
106
138
 
@@ -482,8 +514,6 @@
482
514
 
483
515
  tds[itd].addEventListener('click', {name: this, handleEvent: winorlose_click});
484
516
 
485
-
486
-
487
517
  if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == 1){
488
518
 
489
519
  tds[itd].innerHTML = "○";
@@ -514,6 +544,36 @@
514
544
 
515
545
  // el にはどこでクリックされたかの情報が入っている
516
546
 
547
+ const resultId = el.target.getAttribute("data-id");
548
+
549
+ const XHR = new XMLHttpRequest();
550
+
551
+ XHR.open("GET", `/results/${resultId}`, true);
552
+
553
+ XHR.responseType = "json";
554
+
555
+ XHR.send();
556
+
557
+ XHR.onload = () => {
558
+
559
+ const item = XHR.response.el.target;
560
+
561
+ if (item === "") {
562
+
563
+ el.setAttribute("data-result", "○");
564
+
565
+ }
566
+
567
+ else if (item === "○") {
568
+
569
+ el.setAttribute("data-result", "");
570
+
571
+ }
572
+
573
+ };
574
+
575
+ // el にはどこでクリックされたかの情報が入っている
576
+
517
577
  var arr = el.target.id.split('_'); // idを'_'で分ける .targetで親要素イベントも発火
518
578
 
519
579
  var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid

2

コードの更新を反映させました。

2020/09/30 07:17

投稿

Zengo_Master
Zengo_Master

スコア19

test CHANGED
File without changes
test CHANGED
@@ -56,8 +56,6 @@
56
56
 
57
57
 
58
58
 
59
- <%# 対戦相手の名前を動的に生成 %>
60
-
61
59
  <% @results.each do |result| %>
62
60
 
63
61
  <td class="opponent-name"><%= result.player %></td>
@@ -76,8 +74,6 @@
76
74
 
77
75
 
78
76
 
79
- <%# 対局者の行を動的に生成 %>
80
-
81
77
  <% @results.each_with_index do |result, i| %>
82
78
 
83
79
  <tr class="result-cells">
@@ -214,27 +210,7 @@
214
210
 
215
211
 
216
212
 
217
- // 指定したtdに斜線を引く
218
-
219
- #op_1_1,
220
-
221
- #op_2_2,
222
-
223
- #op_3_3,
224
-
225
- #op_4_4,
226
-
227
- #op_5_5,
228
-
229
- #op_6_6,
230
-
231
- #op_7_7,
232
-
233
- #op_8_8,
234
-
235
- #op_9_9,
236
-
237
- #op_10_10 {
213
+ .right_down_border {
238
214
 
239
215
  background-image: linear-gradient(to top right, transparent, transparent 48%, black 49%, black 51%, transparent 52%, transparent);
240
216
 
@@ -242,24 +218,6 @@
242
218
 
243
219
 
244
220
 
245
- // .right_down_border {
246
-
247
- // background-image: linear-gradient(45deg, /*角度*/
248
-
249
- // transparent 49%,
250
-
251
- // black 49%, /*斜線の色*/
252
-
253
- // black 51%, /*斜線の色*/
254
-
255
- // transparent 51%,
256
-
257
- // transparent);
258
-
259
- // }
260
-
261
-
262
-
263
221
  .top-title {
264
222
 
265
223
  height: 30px;
@@ -328,22 +286,6 @@
328
286
 
329
287
 
330
288
 
331
- .win-count {
332
-
333
-
334
-
335
- }
336
-
337
-
338
-
339
- .lose-count {
340
-
341
-
342
-
343
- }
344
-
345
-
346
-
347
289
  .result-cells {
348
290
 
349
291
  height:40px ;
@@ -438,6 +380,70 @@
438
380
 
439
381
  ```js
440
382
 
383
+ // ※リーグ表の中身の定義
384
+
385
+ var json_data = {"_1":{
386
+
387
+ "member":"Aさん",
388
+
389
+ "_1":{"member":"Aさん","WinOrLose":9},
390
+
391
+ "_2":{"member":"Bさん","WinOrLose":0},
392
+
393
+ "_3":{"member":"Cさん","WinOrLose":0},
394
+
395
+ "_4":{"member":"Dさん","WinOrLose":0},
396
+
397
+ "_5":{"member":"Eさん","WinOrLose":0},
398
+
399
+ "_6":{"member":"Fさん","WinOrLose":0},
400
+
401
+ "_7":{"member":"Gさん","WinOrLose":0},
402
+
403
+ "_8":{"member":"Hさん","WinOrLose":0},
404
+
405
+ "_9":{"member":"Iさん","WinOrLose":0},
406
+
407
+ "_10":{"member":"Jさん","WinOrLose":0}
408
+
409
+ },
410
+
411
+
412
+
413
+ // 途中略
414
+
415
+
416
+
417
+ "_10":{
418
+
419
+ "member":"Jさん",
420
+
421
+ "_1":{"member":"Aさん","WinOrLose":0},
422
+
423
+ "_2":{"member":"Bさん","WinOrLose":0},
424
+
425
+ "_3":{"member":"Cさん","WinOrLose":0},
426
+
427
+ "_4":{"member":"Dさん","WinOrLose":0},
428
+
429
+ "_5":{"member":"Eさん","WinOrLose":0},
430
+
431
+ "_6":{"member":"Fさん","WinOrLose":0},
432
+
433
+ "_7":{"member":"Gさん","WinOrLose":0},
434
+
435
+ "_8":{"member":"Hさん","WinOrLose":0},
436
+
437
+ "_9":{"member":"Iさん","WinOrLose":0},
438
+
439
+ "_10":{"member":"Jさん","WinOrLose":9}
440
+
441
+ }
442
+
443
+ };
444
+
445
+
446
+
441
447
  // 初期処理
442
448
 
443
449
  function init(){
@@ -466,7 +472,7 @@
466
472
 
467
473
  tds[itd].classList.add('right_down_border'); // 縦横同値マスにクラスを指定
468
474
 
469
- }
475
+ }
470
476
 
471
477
  else {
472
478
 
@@ -478,66 +484,6 @@
478
484
 
479
485
 
480
486
 
481
- // ※リーグ表の中身の定義
482
-
483
- var json_data = {"_1":{
484
-
485
- "member":"Aさん",
486
-
487
- "_1":{"member":"Aさん","WinOrLose":9},
488
-
489
- "_2":{"member":"Bさん","WinOrLose":0},
490
-
491
- "_3":{"member":"Cさん","WinOrLose":0},
492
-
493
- "_4":{"member":"Dさん","WinOrLose":0},
494
-
495
- "_5":{"member":"Eさん","WinOrLose":0},
496
-
497
- "_6":{"member":"Fさん","WinOrLose":0},
498
-
499
- "_7":{"member":"Gさん","WinOrLose":0},
500
-
501
- "_8":{"member":"Hさん","WinOrLose":0},
502
-
503
- "_9":{"member":"Iさん","WinOrLose":0},
504
-
505
- "_10":{"member":"Jさん","WinOrLose":0}
506
-
507
- },
508
-
509
- // 途中略
510
-
511
- "_10":{
512
-
513
- "member":"Jさん",
514
-
515
- "_1":{"member":"Aさん","WinOrLose":0},
516
-
517
- "_2":{"member":"Bさん","WinOrLose":0},
518
-
519
- "_3":{"member":"Cさん","WinOrLose":0},
520
-
521
- "_4":{"member":"Dさん","WinOrLose":0},
522
-
523
- "_5":{"member":"Eさん","WinOrLose":0},
524
-
525
- "_6":{"member":"Fさん","WinOrLose":0},
526
-
527
- "_7":{"member":"Gさん","WinOrLose":0},
528
-
529
- "_8":{"member":"Hさん","WinOrLose":0},
530
-
531
- "_9":{"member":"Iさん","WinOrLose":0},
532
-
533
- "_10":{"member":"Jさん","WinOrLose":9}
534
-
535
- }
536
-
537
- };
538
-
539
-
540
-
541
487
  if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == 1){
542
488
 
543
489
  tds[itd].innerHTML = "○";
@@ -574,7 +520,7 @@
574
520
 
575
521
  // 勝敗の記入と取消
576
522
 
577
- if(el.target.innerHTML = ''){ // 勝敗を記入
523
+ if(el.target.innerHTML == ''){ // 勝敗を記入
578
524
 
579
525
  el.target.innerHTML = '○'; // 勝ち
580
526
 
@@ -582,7 +528,7 @@
582
528
 
583
529
  }
584
530
 
585
- else if(el.target.innerHTML = '○'){ // 勝敗を取消
531
+ else if(el.target.innerHTML == '○'){ // 勝敗を取消
586
532
 
587
533
  el.target.innerHTML = ''; // 空白
588
534
 
@@ -590,6 +536,8 @@
590
536
 
591
537
  }
592
538
 
539
+ // 勝ち数と負け数の計算
540
+
593
541
  var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
594
542
 
595
543
  var win = 0;
@@ -644,6 +592,10 @@
644
592
 
645
593
  }
646
594
 
595
+
596
+
597
+ window.addEventListener("load", init);
598
+
647
599
  ```
648
600
 
649
601
 

1

コードの加筆・修正

2020/09/30 03:39

投稿

Zengo_Master
Zengo_Master

スコア19

test CHANGED
File without changes
test CHANGED
@@ -242,6 +242,24 @@
242
242
 
243
243
 
244
244
 
245
+ // .right_down_border {
246
+
247
+ // background-image: linear-gradient(45deg, /*角度*/
248
+
249
+ // transparent 49%,
250
+
251
+ // black 49%, /*斜線の色*/
252
+
253
+ // black 51%, /*斜線の色*/
254
+
255
+ // transparent 51%,
256
+
257
+ // transparent);
258
+
259
+ // }
260
+
261
+
262
+
245
263
  .top-title {
246
264
 
247
265
  height: 30px;
@@ -420,107 +438,211 @@
420
438
 
421
439
  ```js
422
440
 
441
+ // 初期処理
442
+
443
+ function init(){
444
+
445
+ var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
446
+
447
+ // 1行目はヘッダーだから飛ばして
448
+
449
+ for(var itr = 1; itr < trs.length; itr++){
450
+
451
+ // テーブルの行毎に処理
452
+
453
+ var tds = trs[itr].getElementsByTagName('td');
454
+
455
+ for(var itd = 0; itd < tds.length; itd++){
456
+
423
- window.addEventListener('load', function(){
457
+ if(tds[itd].id.indexOf('op_') != -1){
458
+
424
-
459
+ // 勝ち負け入力<td>タグの場合
460
+
461
+ var arr = tds[itd].id.split('_'); // op_数字_数字 → [op, 数字, 数字]
462
+
463
+ if(arr[1] == arr[2]){
464
+
465
+ // 対戦が同じ場合
466
+
467
+ tds[itd].classList.add('right_down_border'); // 縦横同値マスにクラスを指定
468
+
469
+ }
470
+
471
+ else {
472
+
473
+ // 対戦が違う場合、イベントを登録
474
+
475
+ // onclick="winorlose_click(this);" と同じ内容
476
+
477
+ tds[itd].addEventListener('click', {name: this, handleEvent: winorlose_click});
478
+
479
+
480
+
481
+ // ※リーグ表の中身の定義
482
+
483
+ var json_data = {"_1":{
484
+
425
- const op_1_2 = document.getElementById("op_1_2")
485
+ "member":"Aさん",
426
-
427
- const op_1_3 = document.getElementById("op_1_3")
486
+
428
-
429
- const op_1_4 = document.getElementById("op_1_4")
430
-
431
- const op_1_5 = document.getElementById("op_1_5")
432
-
433
- const op_1_6 = document.getElementById("op_1_6")
434
-
435
- const op_1_7 = document.getElementById("op_1_7")
436
-
437
- const op_1_8 = document.getElementById("op_1_8")
438
-
439
- const op_1_9 = document.getElementById("op_1_9")
440
-
441
- const op_1_10 = document.getElementById("op_1_10")
487
+ "_1":{"member":"Aさん","WinOrLose":9},
442
-
488
+
443
- const win_1 = document.getElementById("win_1")
489
+ "_2":{"member":"Bさん","WinOrLose":0},
444
-
490
+
445
- const lose_1 = document.getElementById("lose_1")
491
+ "_3":{"member":"Cさん","WinOrLose":0},
492
+
446
-
493
+ "_4":{"member":"Dさん","WinOrLose":0},
494
+
447
-
495
+ "_5":{"member":"Eさん","WinOrLose":0},
496
+
497
+ "_6":{"member":"Fさん","WinOrLose":0},
498
+
499
+ "_7":{"member":"Gさん","WinOrLose":0},
500
+
501
+ "_8":{"member":"Hさん","WinOrLose":0},
502
+
503
+ "_9":{"member":"Iさん","WinOrLose":0},
504
+
505
+ "_10":{"member":"Jさん","WinOrLose":0}
506
+
507
+ },
448
508
 
449
509
  // 途中略
450
510
 
451
-
452
-
453
- const op_10_1 = document.getElementById("op_10_1")
454
-
455
- const op_10_2 = document.getElementById("op_10_2")
456
-
457
- const op_10_3 = document.getElementById("op_10_3")
458
-
459
- const op_10_4 = document.getElementById("op_10_4")
460
-
461
- const op_10_5 = document.getElementById("op_10_5")
462
-
463
- const op_10_6 = document.getElementById("op_10_6")
464
-
465
- const op_10_7 = document.getElementById("op_10_7")
466
-
467
- const op_10_8 = document.getElementById("op_10_8")
468
-
469
- const op_10_9 = document.getElementById("op_10_9")
470
-
471
- const win_10 = document.getElementById("win_10")
511
+ "_10":{
472
-
473
- const lose_10 = document.getElementById("lose_10")
512
+
474
-
475
-
476
-
477
- op_1_2.addEventListener('click', function(){
478
-
479
- if (op_1_2.innerHTML == ""){
513
+ "member":"Jさん",
514
+
480
-
515
+ "_1":{"member":"Aさん","WinOrLose":0},
516
+
517
+ "_2":{"member":"Bさん","WinOrLose":0},
518
+
519
+ "_3":{"member":"Cさん","WinOrLose":0},
520
+
521
+ "_4":{"member":"Dさん","WinOrLose":0},
522
+
523
+ "_5":{"member":"Eさん","WinOrLose":0},
524
+
525
+ "_6":{"member":"Fさん","WinOrLose":0},
526
+
527
+ "_7":{"member":"Gさん","WinOrLose":0},
528
+
529
+ "_8":{"member":"Hさん","WinOrLose":0},
530
+
531
+ "_9":{"member":"Iさん","WinOrLose":0},
532
+
533
+ "_10":{"member":"Jさん","WinOrLose":9}
534
+
535
+ }
536
+
537
+ };
538
+
539
+
540
+
541
+ if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == 1){
542
+
481
- op_1_2.innerHTML = "○";
543
+ tds[itd].innerHTML = "○";
544
+
482
-
545
+ }
546
+
547
+ else if(json_data['_'+ arr[1]]['_'+ arr[2]]["WinOrLose"] == -1) {
548
+
483
- op_2_1.innerHTML = "●";
549
+ tds[itd].innerHTML = "●";
550
+
551
+ }
552
+
553
+ }
554
+
555
+ }
484
556
 
485
557
  }
486
558
 
487
- else if (op_1_2.innerHTML == "○"){
488
-
489
- op_1_2.innerHTML = "";
490
-
491
- op_2_1.innerHTML = "";
492
-
493
- }
494
-
495
- })
496
-
497
-
498
-
499
- // 途中略
500
-
501
-
502
-
503
- op_10_9.addEventListener('click', function(){
504
-
505
- if (op_10_9.innerHTML == "") {
506
-
507
- op_10_9.innerHTML = "○";
508
-
509
- op_9_10.innerHTML = "●";
510
-
511
- }
512
-
513
- else if (op_10_9.innerHTML == "○"){
514
-
515
- op_10_9.innerHTML = "";
516
-
517
- op_9_10.innerHTML = "";
518
-
519
- }
520
-
521
- })
522
-
523
- })
559
+ }
560
+
561
+ }
562
+
563
+
564
+
565
+ // クリックしたときの処理
566
+
567
+ function winorlose_click(el){
568
+
569
+ // el にはどこでクリックされたかの情報が入っている
570
+
571
+ var arr = el.target.id.split('_'); // idを'_'で分ける .targetで親要素イベントも発火
572
+
573
+ var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1]; // 反対側のid
574
+
575
+ // 勝敗の記入と取消
576
+
577
+ if(el.target.innerHTML = ''){ // 勝敗を記入
578
+
579
+ el.target.innerHTML = '○'; // 勝ち
580
+
581
+ document.getElementById(oppid).innerHTML = '●'; // 負け
582
+
583
+ }
584
+
585
+ else if(el.target.innerHTML = '○'){ // 勝敗を取消
586
+
587
+ el.target.innerHTML = ''; // 空白
588
+
589
+ document.getElementById(oppid).innerHTML = ''; // 空白
590
+
591
+ }
592
+
593
+ var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
594
+
595
+ var win = 0;
596
+
597
+ var lose = 0;
598
+
599
+ // 1行目はヘッダーだから飛ばして
600
+
601
+ for(var itr = 1; itr < trs.length; itr++){
602
+
603
+ // テーブルの行毎に処理
604
+
605
+ win = 0;
606
+
607
+ lose = 0;
608
+
609
+ var tds = trs[itr].getElementsByTagName('td');
610
+
611
+ for(var itd = 0; itd < tds.length; itd++){
612
+
613
+ if(tds[itd].id.indexOf('op_') != -1){
614
+
615
+ // 勝ち負け数カウント
616
+
617
+ if(tds[itd].innerHTML == '○'){
618
+
619
+ win ++;
620
+
621
+ }else if(tds[itd].innerHTML == '●'){
622
+
623
+ lose ++;
624
+
625
+ }
626
+
627
+ } else if(tds[itd].id.indexOf('win_') != -1){
628
+
629
+ // 勝ち表示
630
+
631
+ tds[itd].innerHTML = win;
632
+
633
+ } else if(tds[itd].id.indexOf('lose_') != -1){
634
+
635
+ // 負け表示
636
+
637
+ tds[itd].innerHTML = lose;
638
+
639
+ }
640
+
641
+ }
642
+
643
+ }
644
+
645
+ }
524
646
 
525
647
  ```
526
648