@foreach($events as $event)~@endforeachの間にあるtrタグで囲まれた内容はサーバーサイドの動作によって数が変わります。
あらかじめHTMLに記述することができません。
各々のtrタグにbootstrapの色を変えるクラスを付与したいですが、
LaravelのBladeの機能ではなく、javascript,jqueryのみで実装する方法を教えてください。お願いします。
理由としましては、javascript,jqueryが苦手であることを克服するためです。
html
1<table class="table table-hover"> 2 <thead> 3 <tr> 4 <th scope="col">A</th> 5 <th scope="col">B</th> 6 <th scope="col">C</th> 7 <th scope="col">D</th> 8 </tr> 9 </thead> 10 <tbody> 11 @foreach($events as $event) 12 <tr style="cursor: pointer" class="table-active clickable-row" data-href="/event/eventinfo?id={{$event->event_id}}"> 13 <th scope="row">{{$event->event_name}}</th> 14 <td>{{$event->capacity}}</td> 15 <td>{{$event->accept_end}}</td> 16 <td>{{$event->open_day}}</td> 17 </tr> 18 @endforeach 19 </tbody> 20</table>
こちらが付与したいbootstrapのクラスです。
table-active table-secondary table-light table-primary
回答でできたこと
html
1<table class="table table-hover" id="event-list"> 2 <thead> 3 <tr> 4 <th scope="col">A</th> 5 <th scope="col">B</th> 6 <th scope="col">C</th> 7 <th scope="col">D</th> 8 </tr> 9 </thead> 10 <tbody> 11 @foreach($events as $event) 12 <tr style="cursor: pointer" class="table-active clickable-row" data-href="/event/eventinfo?id={{$event->event_id}}"> 13 <th scope="row">{{$event->event_name}}</th> 14 <td>{{$event->capacity}}</td> 15 <td>{{$event->accept_end}}</td> 16 <td>{{$event->open_day}}</td> 17 </tr> 18 @endforeach 19 </tbody> 20</table>
javascript
1var colors = ['table-active', 'table-secondary', 'table-light','table-primary']; 2var targets = $("#event-list tr"); 3$.each(targets, function (i,value) { 4$("tr").addClass(colors[i % 4]) 5});
回答3件
あなたの回答
tips
プレビュー