リーグ戦の勝ち数を表示する

Question

解決したいこと

htmlのテーブルでリーグ戦を作成しています。現在は結果を記入したところです。
](a1931ae4a638dedb2807537bbe9dc758.png)

**結果を記入した際に、その人の勝ち数を表示したいです。**上図の「勝」の下にあるセル（初期値は０）に、その列の○の数を表示する実装になります。

現在のコードは以下になります。

<div class="header">
  <h1 class="title">
    第7回しゅが研 リーグ表
  </h1>
</div>

<div class="main">
  <div class="league-table">
    <table border="2" bordercolor="black" style="border-collapse: collapse">
      <tr class="top-tr">
        <th class="rank-title">順位</th>
        <th class="member-title">メンバー</th>
        <td class="opponent-name"></td>
        <td class="opponent-name"></td>
        <td class="opponent-name"></td>
        <td class="opponent-name"></td>
        <td class="opponent-name"></td>
        <td class="opponent-name"></td>
        <td class="opponent-name"></td>
        <td class="opponent-name"></td>
        <td class="opponent-name"></td>
        <td class="opponent-name"></td>
        <th class="win-count-title">勝</th>
        <th class="lose-count-title">負</th>
        <th class="sb-count-title">SB</th>
      </tr>
      <tr class="result-cells">
        <td class="rank"></td>
        <td class="self-name"></td>
        <td id="cell1-1"></td>
        <td id="cell1-2"></td>
        <td id="cell1-3"></td>
        <td id="cell1-4"></td>
        <td id="cell1-5"></td>
        <td id="cell1-6"></td>
        <td id="cell1-7"></td>
        <td id="cell1-8"></td>
        <td id="cell1-9"></td>
        <td id="cell1-10"></td>
        <td id="win-1">0</td>
        <td id="lose-1">0</td>
        <td id="sb-1">0</td>
      </tr>
      <tr class="result-cells">
        <td class="rank"></td>
        <td class="self-name"></td>
        <td id="cell2-1"></td>
        <td id="cell2-2"></td>
        <td id="cell2-3"></td>
        <td id="cell2-4"></td>
        <td id="cell2-5"></td>
        <td id="cell2-6"></td>
        <td id="cell2-7"></td>
        <td id="cell2-8"></td>
        <td id="cell2-9"></td>
        <td id="cell2-10"></td>
        <td id="win-2">0</td>
        <td id="lose-2">0</td>
        <td id="sb-2">0</td>
      </tr>

// 以下、列が続く

  </div>
</div>

window.addEventListener('load', function(){

  const cell1_2 = document.getElementById("cell1-2")
  const cell1_3 = document.getElementById("cell1-3")
  const cell1_4 = document.getElementById("cell1-4")
  const cell1_5 = document.getElementById("cell1-5")
  const cell1_6 = document.getElementById("cell1-6")
  const cell1_7 = document.getElementById("cell1-7")
  const cell1_8 = document.getElementById("cell1-8")
  const cell1_9 = document.getElementById("cell1-9")
  const cell1_10 = document.getElementById("cell1-10")
  const win_1 = document.getElementById("win-1")
  const lose_1 = document.getElementById("lose-1")

  const cell2_1 = document.getElementById("cell2-1")
  const cell2_3 = document.getElementById("cell2-3")
  const cell2_4 = document.getElementById("cell2-4")
  const cell2_5 = document.getElementById("cell2-5")
  const cell2_6 = document.getElementById("cell2-6")
  const cell2_7 = document.getElementById("cell2-7")
  const cell2_8 = document.getElementById("cell2-8")
  const cell2_9 = document.getElementById("cell2-9")
  const cell2_10 = document.getElementById("cell2-10")
  const win_2 = document.getElementById("win-2")
  const lose_2 = document.getElementById("lose-2")

// 以下、同様に続く

// セルをクリックすると結果記入ができる

    cell1_2.addEventListener('click', function(){
      if (cell1_2.innerHTML == ""){
        cell1_2.innerHTML = "○";
        cell2_1.innerHTML = "●";
      }
      else if (cell1_2.innerHTML == "○"){
        cell1_2.innerHTML = "";
        cell2_1.innerHTML = "";
      }
    })
    cell1_3.addEventListener('click', function(){
      if (cell1_3.innerHTML == ""){
        cell1_3.innerHTML = "○";
        cell3_1.innerHTML = "●";
      }
      else if (cell1_3.innerHTML == "○"){
        cell1_3.innerHTML = "";
        cell3_1.innerHTML = "";
      }
    })

// 以下、同様に続く

})

調べた内容

table内にある特定の文字列（出席）をカウントする方法
https://teratail.com/questions/39823

検証作業と結果

特定の列でなくても、テーブルの○を数えようと試しました。

cell1_2.innerHTML = "○";
cell2_1.innerHTML = "●";
win_1.innerHTML = $( 'td:contains("○")' ).length;

しかし、反映されませんでした。特定のtrの特定の文字列を数える方法は他にありませんか？

Comments

[kuma_kuma_]

> win_1.innerHTML = $( 'td:contains("○")' ).length;
この書き方だとJQueryでの記載方法だけどJQueryを使用したいのですか？
あとイベント登録等ループ等を使えば簡略化できますが．．．

[Zengo_Master]

JQueryを使用したいわけではありません。
イベント登録等ループ等を使えば簡略化できるとは、繰り返し書く手間を省く意味ですか？

[kuma_kuma_]

> JQueryを使用したいわけではありません。
それじゃこの書き方だとエラーになりますね。

> イベント登録等ループ等を使えば簡略化できるとは、繰り返し書く手間を省く意味ですか？
そうです。

回答を書こうと思えば書けるんですが全部書き直しになりますが...
(学習目的ならあまりよい答え方ではなくなる）

[Zengo_Master]

ありがとうございます。

書き方が根本的にいけなかったかったんですね...
開発目的なので、回答をいただくことは可能でしょうか？

[kuma_kuma_]

> 書き方が根本的にいけなかったかったんですね...
学習を始めたばかりなら知らなくて当然です。

ただ回答の書き方次第で質問者様にためにならない方向は避けたかったので
この様な質問をさせていただきました。

プログラムに正解の書き方は存在しません。
ただ今回私が同じ内容で作るとしたらこんな書き方になりますよ
という内容でお答えします。

Answer 1

対戦表を作ってみました
判りやすく3x3です
またSBも省略しています。

各処理にはコメントをつけているので内容は判ると思います。
今回のポイントとしてはidの付け方です。
質問者様の"cell1-2"からあえて"cell_1_2"に変更したのはidを内容毎に分解しやすくする為です。
これにより反対側の負けの位置がすぐに把握できます。

※あくまでこれは参考例です。これが最適ではありません。
(判りやすい書き方にする為、調整を行っています。)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body onload="init();">
	<div class="header">
		<h1 class="title">
			第7回しゅが研 リーグ表
		</h1>
	</div>

	<div class="main">
		<div class="league-table">
			<table id="winorlose_table" border="2" bordercolor="black" style="border-collapse: collapse">
				<tr class="top-tr">
					<th class="rank-title">順位</th>
					<th class="member-title">メンバー</th>
					<td class="opponent-name"></td>
					<td class="opponent-name"></td>
					<td class="opponent-name"></td>
					<th class="win-count-title">勝</th>
					<th class="lose-count-title">負</th>
				</tr>
				<tr class="result-cells">
					<td class="rank"></td>
					<td class="self-name"></td>
					<td id="cell_1_1"></td>
					<td id="cell_1_2"></td>
					<td id="cell_1_3"></td>
					<td id="win_1">0</td>
					<td id="lose_1">0</td>
				</tr>
				<tr class="result-cells">
					<td class="rank"></td>
					<td class="self-name"></td>
					<td id="cell_2_1"></td>
					<td id="cell_2_2"></td>
					<td id="cell_2_3"></td>
					<td id="win_2">0</td>
					<td id="lose_2">0</td>
				</tr>
				<tr class="result-cells">
					<td class="rank"></td>
					<td class="self-name"></td>
					<td id="cell_3_1"></td>
					<td id="cell_3_2"></td>
					<td id="cell_3_3"></td>
					<td id="win_3">0</td>
					<td id="lose_3">0</td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>

		tr {
			height: 40px;
		}
		td {
			text-align: center;
		}
		.opponent-name {
			width: 37px;
		}
		.win-count-title {
			width: 40px;
		}
		.lose-count-title {
			width: 40px;
		}
		.sb-count-title {
			width: 40px;
		}
		/* 右上がりの斜線 */
		.right_up_border {
		    background-image: linear-gradient(45deg, /*角度*/
		                     transparent 49%,
		                     black 49%, /*斜線の色*/
		                     black 51%, /*斜線の色*/
		                     transparent 51%, 
		                     transparent); 
		}

    // 初期処理
	function init(){
		var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
		// 1行目はヘッダーだから飛ばして
		for(var itr = 1; itr < trs.length; itr++){
			// テーブルの行毎に処理
			var tds = trs[itr].getElementsByTagName('td');
			for(var itd = 0; itd < tds.length; itd++){
				if(tds[itd].id.indexOf('cell_') != -1){
					// 勝ち負け入力<td>タグの場合
					var arr = tds[itd].id.split('_');
					if(arr[1] == arr[2]){
						// 対戦が同じ場合
						tds[itd].classList.add('right_up_border');	// 斜め線を指定
					}else{
						// 対戦が違う場合、イベントを登録
						// onclick="winorlose_click(this);" とおんなじ内容
						tds[itd].addEventListener('click', {name: this, handleEvent: winorlose_click});
					}
				}
			}
		}
	}
	// クリックしたときの処理
	function winorlose_click(el){
		// el にはどこでクリックされたかの情報が入っている
		var arr = el.target.id.split('_');					// idを'_'で分ける
		var oppid = arr[0] + '_' + arr[2] + '_'+ arr[1];	// 反対側のid
		el.target.innerHTML = '○';							// 勝ち
		document.getElementById(oppid).innerHTML = '●';	// 負け
		var trs = document.getElementById("winorlose_table").getElementsByTagName('tr');
		var win = 0;
		var loss = 0;
		// 1行目はヘッダーだから飛ばして
		for(var itr = 1; itr < trs.length; itr++){
			// テーブルの行毎に処理
			win = 0;
			loss = 0;
			var tds = trs[itr].getElementsByTagName('td');
			for(var itd = 0; itd < tds.length; itd++){
				if(tds[itd].id.indexOf('cell_') != -1){
					// 勝ち負け数カウント
					if(tds[itd].innerHTML == '○'){
						win ++;
					}else if(tds[itd].innerHTML == '●'){
						loss ++;
					}
				} else if(tds[itd].id.indexOf('win_') != -1){
					// 勝ち表示
					tds[itd].innerHTML = win;
				} else if(tds[itd].id.indexOf('lose_') != -1){
					// 負け表示
					tds[itd].innerHTML = loss;
				}
			}
		}
	}

Comments

[Zengo_Master]

ありがとうございます。
３つのファイルでは動きました。
ただ、今回はRailsで実装するのですが、同じ書き方だと動作しません。

[kuma_kuma_]

1. まずはHTMLで動くものを作る。
2. その後Railsで同じものを作るようにする。
という手順だからね
Railsの手法に変換するのは
https://www.buildinsider.net/web/rubyonrails4/0203
が参考になるかな？