根据表格值更改文本颜色 Laravel答案

【问题标题】：Change text color depending on table value Laravel根据表格值更改文本颜色 Laravel
【发布时间】：2021-11-17 23:47:48
【问题描述】：

我在 Laravel 刀片上有数据表。该表有许多行和三列，其中最后一列的值为薪水。我必须从表中选出薪水最高的 15 个人。

表格中文本的前 5 行 (1-5) 应该是绿色，接下来的 5 行 (6-11) 应该是黄色，接下来的 5 行 (11-15) 应该是红色，并且剩下的行应该像往常一样是黑色的。

代码是使用 Laravel Blade 和 table DataTables 编写的。

 @foreach($jamisoni as $pay)
    <tr>
     <td>{{$loop->iteration}}</td>
     <td>{{$pay->name}}</td>
     <td>{{$pay->amount}}</td>
    </tr>
 @endforeach

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:12px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:12px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-viqs{color:#fe0000;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
.tg .tg-xdmp{color:#0a790a;text-align:left;vertical-align:top}
.tg .tg-i99s{color:#ffcb2f;text-align:left;vertical-align:top}
</style>
<table class="tg">
<thead>
  <tr>
    <th class="tg-0lax">ID</th>
    <th class="tg-0lax">NAME</th>
    <th class="tg-0lax">COUNT</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-xdmp">1</td>
    <td class="tg-xdmp">User 35</td>
    <td class="tg-xdmp">100 000</td>
  </tr>
  <tr>
    <td class="tg-xdmp">2</td>
    <td class="tg-xdmp">User 01</td>
    <td class="tg-xdmp">98 000</td>
  </tr>
  <tr>
    <td class="tg-xdmp">3</td>
    <td class="tg-xdmp">User 24</td>
    <td class="tg-xdmp">95 000</td>
  </tr>
  <tr>
    <td class="tg-xdmp">4</td>
    <td class="tg-xdmp">User 26</td>
    <td class="tg-xdmp">92 000</td>
  </tr>
  <tr>
    <td class="tg-xdmp">5</td>
    <td class="tg-xdmp">User 10</td>
    <td class="tg-xdmp">91 000</td>
  </tr>
  <tr>
    <td class="tg-i99s">6</td>
    <td class="tg-i99s">User 11</td>
    <td class="tg-i99s">85 000</td>
  </tr>
  <tr>
    <td class="tg-i99s">7</td>
    <td class="tg-i99s">User 22</td>
    <td class="tg-i99s">85 000</td>
  </tr>
  <tr>
    <td class="tg-i99s">8</td>
    <td class="tg-i99s">User 24</td>
    <td class="tg-i99s">84 000</td>
  </tr>
  <tr>
    <td class="tg-i99s">9</td>
    <td class="tg-i99s">User 55</td>
    <td class="tg-i99s">83 000</td>
  </tr>
  <tr>
    <td class="tg-i99s">10</td>
    <td class="tg-i99s">User 65</td>
    <td class="tg-i99s">82 000</td>
  </tr>
  <tr>
    <td class="tg-viqs">11</td>
    <td class="tg-viqs">User 40</td>
    <td class="tg-viqs">70 000</td>
  </tr>
  <tr>
    <td class="tg-viqs">12</td>
    <td class="tg-viqs">User 39</td>
    <td class="tg-viqs">69 000</td>
  </tr>
  <tr>
    <td class="tg-viqs">13</td>
    <td class="tg-viqs">User 29</td>
    <td class="tg-viqs">65 000</td>
  </tr>
  <tr>
    <td class="tg-viqs">14</td>
    <td class="tg-viqs">User 44</td>
    <td class="tg-viqs">64 000</td>
  </tr>
  <tr>
    <td class="tg-viqs">15</td>
    <td class="tg-viqs">User 58</td>
    <td class="tg-viqs">63 000</td>
  </tr>
  <tr>
    <td class="tg-0lax">16</td>
    <td class="tg-0lax">User 70</td>
    <td class="tg-0lax">58 000</td>
  </tr>
  <tr>
    <td class="tg-0lax">17</td>
    <td class="tg-0lax">User 71</td>
    <td class="tg-0lax">55 000</td>
  </tr>
</tbody>
</table>

请帮忙解决这个问题。

【问题讨论】：

标签： javascript html laravel datatables

【解决方案1】：

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

定义一个$color 变量并立即分配颜色值。完成后，只需通过指定类在 <td> 标记中使用它。

【讨论】：

【解决方案2】：

您可以使用$loop 变量作为条件将nedded 类写入您的行。刀片循环：

 @foreach($jamisoni as $pay)
    <tr class="
    @if($loop->iteration < 6)
       {{ 'td-text-green' }} 
    @elseif($loop->iteration < 11) 
       {{ 'td-text-yellow' }}
    @elseif($loop->iteration < 16)
       {{ 'td-text-red' }}
    @endif
    ">
        <td>{{$loop->iteration}}</td>
        <td>{{$pay->name}}</td>
        <td>{{$pay->amount}}</td>
    </tr>
 @endforeach

CSS：

.td-text-green td {color: green;}
.td-text-yellow td {color: yellow;}
.td-text-red td {color: red;}

【讨论】：