具有多种条件的多个

Question

我正在使用以下代码创建一个如下表所示的表：

我正在尝试使用＆＃39; Javascript＆＃39;设置条件并与＆＃34; td＆＃34;中的值进行比较。 我有问题为每列设置不同的条件。

需要帮助：

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

• [条件1]突出显示，如果＆＃39;数量＆＃39;小于＆＃39; 1000＆＃39;。

• [条件2]突出显示，如果＆＃39;百分比＆＃39;低于＆＃39; 80％＆＃39;

  <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

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

  

例如：我想设置2个条件，如何指定td名称/ ID？

     

  
• [条件1]突出显示，如果＆＃39;数量＆＃39;小于＆＃39; 1000＆＃39;。
  
• [条件2]突出显示，如果＆＃39;百分比＆＃39;小于＆＃39; 80％＆＃39;
  

＆＃13;

＆＃13;

$('#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');
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

检查表列的索引，然后应用条件。

$("#ss tr").each( function(i, ele) {
     
     $(ele).find('td').each(function(index, v) {
       
       var cellValue = parseInt($(v).text());
       console.log(cellValue);
       if (!isNaN(cellValue) && (((cellValue <=1000) &&(index == 1)) || ((cellValue <=80) &&(index == 2)))) {
           $(v).css("background-color","#FFEEC4");
        }
     
     })
     
  }
 )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>