为 laravel 表应用备用行颜色 CSS答案

【问题标题】：applying alternate row color CSS for laravel table为 laravel 表应用备用行颜色 CSS
【发布时间】：2019-01-06 10:44:25
【问题描述】：

如何在 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>

【问题讨论】：

如果只是 css 那么可能是.gridview tr:nth-of-type( even ) td{/* definitions */}
@RamRaider 请告诉我代码，如何实现它.gridview tr:nth-of-type( even ) td{/* definitions */}。谢谢！

标签： php css laravel laravel-5

【解决方案1】：

@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

【讨论】：

【解决方案2】：

如果你只是想玩css：

tr:nth-child(even) td {
   background: #FFFFFF;
}

对于奇数 tr：

tr:nth-child(odd) td {
   background: grey;
}

【讨论】：

【解决方案3】：

<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 做这件事的最好方法

【讨论】：

我已经添加了更多解释。