Laravel Blade中根据薪资排名为DataTables表格行设置不同文字颜色

API 探路者

2026-10-3

实现方案

方案1：直接复用现有预设样式（无需修改CSS）

你已经预设好了对应颜色的样式类，直接在Blade循环中通过$loop->iteration（当前循环次数，从1开始，正好对应排名）判断区间，给每个td加上对应类即可，修改后的渲染代码如下：

@foreach($jamisoni as $pay)
    @php
        $rank = $loop->iteration;
        if ($rank <= 5) {
            $class = 'tg-xdmp';
        } elseif ($rank <= 10) {
            $class = 'tg-i99s';
        } elseif ($rank <= 15) {
            $class = 'tg-viqs';
        } else {
            $class = 'tg-0lax';
        }
    @endphp
    <tr>
        <td class="{{ $class }}">{{ $loop->iteration }}</td>
        <td class="{{ $class }}">{{ $pay->name }}</td>
        <td class="{{ $class }}">{{ $pay->amount }}</td>
    </tr>
@endforeach

方案2：简化代码（推荐，少量修改CSS）

可以新增几个tr层级的样式，不用重复给每个td加类，代码更简洁：
首先在你的style标签中新增如下样式：

.tg .rank-green td { color: #0a790a; text-align: left; vertical-align: top; }
.tg .rank-yellow td { color: #ffcb2f; text-align: left; vertical-align: top; }
.tg .rank-red td { color: #fe0000; text-align: left; vertical-align: top; }
.tg .rank-default td { color: inherit; text-align: left; vertical-align: top; }

然后Blade代码修改为：

@foreach($jamisoni as $pay)
    @php
        $rank = $loop->iteration;
        $trClass = match(true) {
            $rank <= 5 => 'rank-green',
            $rank <= 10 => 'rank-yellow',
            $rank <= 15 => 'rank-red',
            default => 'rank-default'
        };
    @endphp
    <tr class="{{ $trClass }}">
        <td>{{ $loop->iteration }}</td>
        <td>{{ $pay->name }}</td>
        <td>{{ $pay->amount }}</td>
    </tr>
@endforeach