我有一张桌子,我想把它和桌子比较一下。
如果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
>
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>