[英]applying alternate row color CSS for laravel table
如何在laravel表中應用替代行顏色CSS。 我想為表格行顯示備用顏色。 我將gridview cssclass保留在表中。 我想將.gridview tr.even td
應用於偶數行計數,即2的倍數行。
我的CSS文件
.gridview {
font-family: "arial";
background-color: #FFFFFF;
width: 100%;
font-size: small;
}
.gridview th {
background: #0CA3D2;
padding: 5px;
font-size: small;
}
.gridview td {
background: #B6E1EE;
color: #333333;
font: small "arial";
padding: 4px;
}
.gridview tr.even td {
background: #FFFFFF;
}
表格代碼
<table id="showBooksIn" class="table table-bordered gridview">
<thead>
<tr>
<th>BOOK ID</th>
<th>BILLED DATE</th>
</tr>
</thead>
<tbody>
@foreach($ordered_books as $data)
<tr>
<td> {{$data['BookID']}} </td>
<td> {{$data['BilledDate']}} </td>
</tr>
@endforeach
</tbody>
</table>
@RamRaider最好使用css。 另一種方法是使用模運算符:
@foreach($ordered_books as $i => $data)
@php $class = $i ÷ 2 === 0 ? 'even' : 'odd'; @endphp
<tr class="{{ $class }}">
<td> {{$data['BookID']}} </td>
<td> {{$data['BilledDate']}} </td>
</tr>
@endforeach
如果您只想玩CSS:
tr:nth-child(even) td {
background: #FFFFFF;
}
對於奇數tr:
tr:nth-child(odd) td {
background: grey;
}
<table id="showBooksIn" class="table table-bordered gridview" style="color:{{ !is_null(user()) ? 'red' : 'green' }}">
<thead>
<tr>
<th>BOOK ID</th>
<th>BILLED DATE</th>
</tr>
</thead>
<tbody>
@foreach($ordered_books as $data)
<tr>
<td> {{$data['BookID']}} </td>
<td> {{$data['BilledDate']}} </td>
</tr>
@endforeach
</tbody>
</table>
這是php的示例,但我認為用js做到這一點的最佳方法
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.