Change text color depending on table value Laravel-CodePudding

I have datatables on Laravel blade. The table has many rows and three columns which have last column value of salary. I have to choose the 15 people with the highest salary from the table.

The first 5 rows (1-5) of the text in the table should be green, the next 5 rows (6-11) should be yellow, the next 5 rows (11-15) should be red, and the remaining rows should be black as usual.

The codes were written using Laravel Blade and 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>

Please help to solve this problem.

CodePudding user response：

You can use $loop variable as condition to write nedded classes to your rows. Blade loop:

 @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;}

CodePudding user response：

@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

Define a $color variable and assign the color value at once. Once done just use it inside your <td> tag by specifying the class.