提问者:小点点

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


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

如果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


共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>

  • 匿名用户

    您可以使用.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>