我有一个表，如果表中的A2>A1，我想将行设置为红色

Question

我有一张桌子，我想把它和桌子比较一下。

如果A2>A1，我希望将行设置为红色。我可以使用每个命令访问数据，但是我在类中很难分配。

null

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-sm table-bordered mt-4" style="font-size: 12px; ">
  <thead>
    <th>
      <center>Stok</center>
    </th>
    <th>
      <center>A1</center>
    </th>
    <th>
      <center>A2</center>
    </th>
  </thead>
  <tbody id="arsivTablosu">

    <tr id="satir">
      <td>A1</td>
      <td id="envanter" class="">
        <center>44</center>
      </td>
      <td id="kritikStok" class="">
        <center>45</center>
      </td>
    </tr>

    <tr id="satir">
      <td>A2</td>
      <td id="envanter" class="">
        <center>50</center>
      </td>
      <td id="kritikStok" class="">
        <center>10</center>
      </td>
    </tr>

    <tr id="satir">
      <td>A3</td>
      <td id="envanter" class="">
        <center>26</center>
      </td>
      <td id="kritikStok" class="">
        <center>27</center>
      </td>
    </tr>

    <tr id="satir">
      <td>A4</td>
      <td id="envanter" class="">
        <center>40</center>
      </td>
      <td id="kritikStok" class="">
        <center>39</center>
      </td>
    </tr>



  </tbody>
</table>

null

Answer 1

您可以使用.each循环遍历您的tbody trs，然后使用.find（“td:eq(1)center”）从第2列获得td的值，使用.find（“td:eq(2)center”）从第3列获得值，然后比较两者并根据此添加类。

演示代码：

null

//loop through tr
$("#arsivTablosu tr").each(function() {
  //check the value of 2 & 3 td 
  parseInt($(this).find("td:eq(2) center").text()) > parseInt($(this).find("td:eq(1) center").text()) ? $(this).addClass("red_color") : ""
})

.red_color {
  background-color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-sm table-bordered mt-4" style="font-size: 12px; ">
  <thead>
    <th>
      <center>Stok</center>
    </th>
    <th>
      <center>A1</center>
    </th>
    <th>
      <center>A2</center>
    </th>
  </thead>
  <tbody id="arsivTablosu">

    <tr>
      <td>A1</td>
      <td>
        <center>44</center>
      </td>
      <td>
        <center>45</center>
      </td>
    </tr>

    <tr>
      <td>A2</td>
      <td>
        <center>50</center>
      </td>
      <td>
        <center>10</center>
      </td>
    </tr>

    <tr>
      <td>A3</td>
      <td>
        <center>26</center>
      </td>
      <td>
        <center>27</center>
      </td>
    </tr>

    <tr>
      <td>A4</td>
      <td>
        <center>40</center>
      </td>
      <td>
        <center>39</center>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

>

ID必须是唯一的，因此将它们转换为类（在类中重复ID）。

根据值比较，添加类red，然后在此类上添加CSS

硬编码示例：

null

.red{
    background-color: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-sm table-bordered mt-4" style="font-size: 12px; ">
 <thead> 
  <th><center>Stok</center></th>
  <th><center>A1</center></th> 
  <th><center>A2</center></th> 
 </thead>
 <tbody id="arsivTablosu">

  <tr class="satir red">
    <td>A1</td>
    <td class="envanter" class=""><center>44</center></td> 
    <td class="kritikStok" class=""><center>45</center></td> 
  </tr>
  
  <tr class="satir">
    <td>A2</td>
    <td class="envanter" class=""><center>50</center></td> 
    <td class="kritikStok" class=""><center>10</center></td> 
  </tr>
  
  <tr class="satir red">
    <td>A3</td>
    <td class="envanter" class=""><center>26</center></td> 
    <td class="kritikStok" class=""><center>27</center></td> 
  </tr>
  
  <tr class="satir">
    <td>A4</td>
    <td class="envanter" class=""><center>40</center></td> 
    <td class="kritikStok" class=""><center>39</center></td> 
  </tr>
 </tbody>
</table>