javascript - 具有多个条件的多个 <td>

Question

我正在用下面的代码创建一个看起来像这样的表:

我正在尝试使用“Javascript”来设置条件并与“td”中的值进行比较。 我在为每一列设置不同的条件时遇到问题。

需要帮助:

例如:我想设置2个条件，我该如何分配td name/id？

• [条件 1] 如果“数量”小于“1000”，则突出显示。

• [条件 2] 如果“百分比”小于“80%”，则突出显示。

  <style>
  table, th, td {
      border: 1px solid black;
  }
  </style>
  <script src="js/jquery.min.js"></script>
  
  <table id='ss'>
    <tr>
      <th>WW</th>
      <th>Qty</th> 
      <th>percentage</th>
    </tr>
    <tr>
      <td>WW01</td>
      <td>1000</td> 
      <td>50%</td>
    </tr>
    <tr>
      <td>WW02</td>
      <td>2000</td> 
      <td>90%</td>
    </tr>
  </table>
  
  <script>
  $("#ss td").each( function() {
       var thisCell = $(this);
       var cellValue = parseInt(thisCell.text());
  
       if (!isNaN(cellValue) && (cellValue <=1000)) {
           thisCell.css("background-color","#FFEEC4");
        }
    }
   )
  </script> 
  

Answer 1

根据您的示例条件检查我的代码段:

Eg: I want to set 2 conditions, how do i assign td name/id?

• [Condition 1] Highlight, if 'Qty' less than '1000'.
• [Condition 2] Highlight, if 'percentage' less than '80%'.

---

$('#ss tr').each(function() {
  var that = $(this);
  var c1 = $('td:nth-child(2)', that);
  var c2 = $('td:nth-child(3)', that);
  
  if (parseInt(c1.text()) < 1000)
    c1.css('background-color', '#FFEEC4');
  
  if (parseInt(c2.text()) < 80)
    c2.css('background-color', '#FFEEC4');
});

table, th, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='ss'>
  <tr>
    <th>WW</th>
    <th>Qty</th> 
    <th>percentage</th>
  </tr>
  <tr>
    <td>WW01</td>
    <td>1000</td> 
    <td>50%</td>
  </tr>
  <tr>
    <td>WW02</td>
    <td>2000</td> 
    <td>90%</td>
  </tr>
</table>