解決したいこと

Railsで総当たりリーグ戦の表を作成しています。以下に、現在のテーブルを示します。

自分vs自分のところに斜線を引くことが目的ですが、tdは個別でなくeach文で生成しているため、cssで斜線を引くことが困難な状況です。

現在のコードファイル

以下に、Railsの各ファイルのコードを掲載致します。
※対局者紹介のテーブルは問題ありません。

app/controllers/results_controller.rb

ruby
1class ResultsController < ApplicationController
2  def index
3    @results = Result.all
4  end
5end

app/views/results/index.html.erb

html
1<div class="header">
2  <h1 class="title">第7回しゅが研</h1>
3</div>
4
5<div class="main">
6  <div class="league-table">
7    <h2 class="league-table-title">リーグ表</h2>
8    <table id="winorlose_table" border="2" bordercolor="black" style="border-collapse: collapse">
9      <tr class="top-title">
10        <th class="rank-title">順位</th>
11        <th class="player-title">対局者</th>
12
13        <% @results.each do |result| %>
14        <td class="opponent-name"><%= result.player %></td>
15        <% end %>
16
17        <th class="win-count-title">勝</th>
18        <th class="lose-count-title">負</th>
19        <th class="sb-count-title">SB</th>
20      </tr>
21
22      <% @results.each do |result| %>
23      <tr class="result-cells">
24        <td class="rank"></td>
25        <td class="self-name"><%= result.player %></td>
26        <td class="op_1"><%= result.op_1 %></td>
27        <td class="op_2"><%= result.op_2 %></td>
28        <td class="op_3"><%= result.op_3 %></td>
29        <td class="op_4"><%= result.op_4 %></td>
30        <td class="op_5"><%= result.op_5 %></td>
31        <td class="op_6"><%= result.op_6 %></td>
32        <td class="op_7"><%= result.op_7 %></td>
33        <td class="op_8"><%= result.op_8 %></td>
34        <td class="op_9"><%= result.op_9 %></td>
35        <td class="op_10"><%= result.op_10 %></td>
36        <td class="win">0</td>
37        <td class="lose">0</td>
38        <td class="sb">0</td>
39      </tr>
40      <% end %>
41
42    </table>
43  </div>
44
45  <div class="member-list">
46    <h2 class="member-list-title">対局者紹介</h2>
47    <table border="2" bordercolor="black" style="border-collapse: collapse" class="member-table">
48
49      <tr class="member-info">
50        <th class="member-title">対局者</th>
51        <th class="account-title">アカウント</th>
52        <th class="achievement-title">実績</th>
53      </tr>
54
55      <% @results.each do |result| %>
56      <tr class="member-introduction">
57        <td class="member"></td>
58        <td class="account"></td>
59        <td class="achievement"></td>
60      </tr>
61      <% end %>
62
63    </table>
64    </div>
65  </div>
66</div>

css
1.header {
2  margin: 20px;
3}
4
5.main {
6  margin: 20px;
7}
8
9.league-table {
10  margin-top: 20px;
11}
12
13.league-table-title {
14  margin-bottom: 5px;
15}
16
17.league-table td {
18  text-align: center;
19}
20
21// 指定したtdに斜線を引く
22.op_1,
23.op_2,
24.op_3,
25.op_4,
26.op_5,
27.op_6,
28.op_7,
29.op_8,
30.op_9,
31.op_10 {
32  // background-image: linear-gradient(to top right, transparent, transparent 48%, black 49%, black 51%, transparent 52%, transparent);
33}
34
35.top-title {
36  height: 30px;
37}
38
39.rank-title {
40  width: 50px;
41  background-color: #FFFFAA;
42}
43
44.player-title {
45  width: 80px;
46  background-color: #EEEEEE;
47}
48
49.opponent-name {
50  width: 80px;
51  background-color: #EEEEEE;
52}
53
54.win-count-title {
55  width: 50px;
56  background-color: #FFD5EC;
57}
58
59.lose-count-title {
60  width: 50px;
61  background-color: #D9E5FF;
62}
63
64.sb-count-title {
65  width: 50px;
66  background-color: #F3FFD8;
67}
68
69.win-count {
70
71}
72
73.lose-count {
74
75}
76
77.result-cells {
78  height:40px ;
79}
80
81.result-cells td {
82}
83
84.self-name {
85  height:40px ;
86  background-color: #EEEEEE;
87}
88
89.member-list {
90  margin-top: 30px;
91}
92
93.member-list-title {
94  margin-bottom: 5px;
95}
96
97.member-info {
98  height: 30px;
99}
100
101.member-title {
102  width: 100px;
103  text-align: center;
104  background-color: #EEEEEE;
105}
106
107.account-title {
108  width: 150px;
109  text-align: center;
110}
111
112.achievement-title {
113  width: 500px;
114  text-align: center;
115}
116
117.member-introduction td {
118  height: 30px;
119}

調べた内容

・HTML テーブルの空セルに斜線を引く方法
https://qiita.com/SHiN201007/items/6d074faba820e94e1fab

#試した内容
現在のcssでもありますが、linear-gradientで斜線は引けても、全マス斜線になってしまいます。sそのため、コメントアウトしています。

each文で生成したtdを個別に取得する方法が分かりません。each文でtdを生成するたびに、個別のclassを作るのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

斜線を引きたいtdだけ特定のクラスをかけて、それを「// 指定したtdに斜線を引く」に指定すればいいだけではないでしょうか？

each_with_indexを使えば、いまのループが何回目かを取得できます。その値を使えば、斜線を引くべき場所かどうかを判定してそこだけクラスを付けることも可能となるかと思います。

投稿2020/09/27 09:33

maisumakun

総合スコア145208

Zengo_Master

2020/09/27 11:13 編集

ありがとうございます。 each_with_indexに変えて、要素をresult、index番号をiとしました。 <% @results.each_with_index do |result, i| %> ところで、以下の書き方でclassにiを含めるにはどうすればいいのでしょうか？ <td class="???"><%= result.op_1 %></td>

Zengo_Master

2020/09/27 11:23 編集

以下のサイトを調べて解決できました。・railsでeach文の展開中にCSSのクラス名を動的な数値をつける https://teratail.com/questions/25105 修正後のコード <% @results.each_with_index do |result, i| %> <tr class="result-cells"> <td class="rank"></td> <td class="self-name"><%= result.player %></td> <td class="op_<%= i + 1 %>_1"><%= result.op_1 %></td> <td class="op_<%= i + 1 %>_2"><%= result.op_2 %></td> <td class="op_<%= i + 1 %>_3"><%= result.op_3 %></td> <td class="op_<%= i + 1 %>_4"><%= result.op_4 %></td> <td class="op_<%= i + 1 %>_5"><%= result.op_5 %></td> <td class="op_<%= i + 1 %>_6"><%= result.op_6 %></td> <td class="op_<%= i + 1 %>_7"><%= result.op_7 %></td> <td class="op_<%= i + 1 %>_8"><%= result.op_8 %></td> <td class="op_<%= i + 1 %>_9"><%= result.op_9 %></td> <td class="op_<%= i + 1 %>_10"><%= result.op_10 %></td> <td class="win">0</td> <td class="lose">0</td> <td class="sb">0</td> </tr> <% end %> ありがとうございました。

行動規範の内容に同意します