teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問tableの行をカラフルにする方法を教えてください。(javascriptのみで)

編集履歴

質問編集履歴

6

質問ないよう変更

2018/10/25 09:01

投稿

HearthXml
HearthXml

スコア51

test CHANGED
File without changes
test CHANGED
@@ -5,6 +5,8 @@
5
5
  各々のtrタグにbootstrapの色を変えるクラスを付与したいですが、
6
6
 
7
7
  LaravelのBladeの機能ではなく、javascript,jqueryのみで実装する方法を教えてください。お願いします。
8
+
9
+ 理由としましては、javascript,jqueryが苦手であることを克服するためです。
8
10
 
9
11
  ```html
10
12
 

5

資料修正

2018/10/25 09:00

投稿

HearthXml
HearthXml

スコア51

test CHANGED
File without changes
test CHANGED
@@ -70,6 +70,52 @@
70
70
 
71
71
  回答でできたこと
72
72
 
73
+ ```html
74
+
75
+ <table class="table table-hover" id="event-list">
76
+
77
+ <thead>
78
+
79
+ <tr>
80
+
81
+ <th scope="col">A</th>
82
+
83
+ <th scope="col">B</th>
84
+
85
+ <th scope="col">C</th>
86
+
87
+ <th scope="col">D</th>
88
+
89
+ </tr>
90
+
91
+ </thead>
92
+
93
+ <tbody>
94
+
95
+ @foreach($events as $event)
96
+
97
+ <tr style="cursor: pointer" class="table-active clickable-row" data-href="/event/eventinfo?id={{$event->event_id}}">
98
+
99
+ <th scope="row">{{$event->event_name}}</th>
100
+
101
+ <td>{{$event->capacity}}</td>
102
+
103
+ <td>{{$event->accept_end}}</td>
104
+
105
+ <td>{{$event->open_day}}</td>
106
+
107
+ </tr>
108
+
109
+ @endforeach
110
+
111
+ </tbody>
112
+
113
+ </table>
114
+
115
+ ```
116
+
117
+
118
+
73
119
  ```javascript
74
120
 
75
121
  var colors = ['table-active', 'table-secondary', 'table-light','table-primary'];

4

回答からできた成果物を追加

2018/10/24 12:01

投稿

HearthXml
HearthXml

スコア51

test CHANGED
File without changes
test CHANGED
@@ -65,3 +65,21 @@
65
65
  table-primary
66
66
 
67
67
  ```
68
+
69
+
70
+
71
+ 回答でできたこと
72
+
73
+ ```javascript
74
+
75
+ var colors = ['table-active', 'table-secondary', 'table-light','table-primary'];
76
+
77
+ var targets = $("#event-list tr");
78
+
79
+ $.each(targets, function (i,value) {
80
+
81
+ $("tr").addClass(colors[i % 4])
82
+
83
+ });
84
+
85
+ ```

3

希望実装にjquery追加

2018/10/24 11:55

投稿

HearthXml
HearthXml

スコア51

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  各々のtrタグにbootstrapの色を変えるクラスを付与したいですが、
6
6
 
7
- LaravelのBladeの機能ではなく、javascriptのみで実装する方法を教えてください。お願いします。
7
+ LaravelのBladeの機能ではなく、javascript,jqueryのみで実装する方法を教えてください。お願いします。
8
8
 
9
9
  ```html
10
10
 

2

途中書きを修正。

2018/10/24 11:35

投稿

HearthXml
HearthXml

スコア51

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
  あらかじめHTMLに記述することができません。
4
4
 
5
- 各々のtrタグにbootstrapの色を変えるクラスを付与したいですが、javascriptでの実装方法
5
+ 各々のtrタグにbootstrapの色を変えるクラスを付与したいですが、
6
+
7
+ LaravelのBladeの機能ではなく、javascriptのみで実装する方法を教えてください。お願いします。
6
8
 
7
9
  ```html
8
10
 

1

抜けていた内容を追加

2018/10/24 10:56

投稿

HearthXml
HearthXml

スコア51

test CHANGED
File without changes
test CHANGED
@@ -50,6 +50,8 @@
50
50
 
51
51
 
52
52
 
53
+ こちらが付与したいbootstrapのクラスです。
54
+
53
55
  ```
54
56
 
55
57
  table-active