时间戳

首页 > 解决方案 > 根据表值更改文本颜色 Laravel

javascript - 根据表值更改文本颜色 Laravel

问题描述

我在 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>

请帮助解决这个问题。

标签： javascripthtmllaraveldatatables

解决方案

您可以使用$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;}

推荐阅读