Multiple <td> with Multiple Conditions

Question

I am creating a table that looks like this:

I am trying to use "Javascript" to fulfill the installation condition and compare with the value in "td". I am having the problem of setting different conditions for each column.

Help is needed:

For example: I want to set 2 conditions, how do I assign the name / id td?

• [Condition 1] Highlight if "Number" is less than "1000".

• [Condition 2] Highlight if "percent" is less than "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

Check out my snippet based on your example:

For example: I want to set 2 conditions, how do I assign the name / id td?

• [Condition 1] Highlight if "Number" is less than "1000".
• [ 2] , "" "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>

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>