Iterate table row and cell and change specific styles

Question

I am trying to loop through each row to check marks for that particular person and comparing it with Score Column Value for that person only. If the **

marks > score, the cell background color will be green, else it will turn red.

** I am able to color the cells but it is only considering score value of 1st row only. I am trying to understand what i am missing here?

 $('#'+'marksbody').find('tr>td').each(function(i, el) { var scoreValue1= $('#'+'marksbody'+' tr td:nth-child(7) > label[id^="score"]')[0].innerHTML.split("%")[0].trim(); var scoreValue=(scoreValue1 == null || scoreValue1 == '')? 0: Number(scoreValue1); console.log("Score Value: " + scoreValue) if(isNaN(Number($(this).text().split("%")[0].trim())) ==false && Number($(this).text().split("%")[0].trim())>=Number(scoreValue)){ $(this).css({'background-color':'lightgreen'}); } else if(isNaN(Number($(this).text().split("%")[0].trim())) ==false && Number($(this).text().split("%")[0].trim())<Number(scoreValue)){ $(this).css({'background-color':'red'}); } });

 <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <table id="table" border="1"> <thead> <tr> <th>Name</th> <th>MArks2</th> <th>Mark3s</th> <th>Marks4</th> <th>MArks5</th> <th>MArks6</th> <th>score</th> <th>Avg</th> <th>Total</th> </tr> </thead> <tbody id="marksbody"> <tr> <td>Rock</td> <td>20</td> <td>25</td> <td>28</td> <td>40</td> <td>50</td> <td><label id="score1">0</label></td> <td>80</td> <td>90</td> </tr> <tr> <td>Alex</td> <td>20</td> <td>25</td> <td>28</td> <td>40</td> <td>50</td> <td id="score2">40</td> <td>80</td> <td>90</td> </tr> <tr> <td>Chen</td> <td>20</td> <td>25</td> <td>28</td> <td>40</td> <td>50</td> <td id="score3">50%</td> <td>80</td> <td>90</td> </tr> <tr> <td>Mark</td> <td>20</td> <td>25</td> <td>28</td> <td>40</td> <td>50</td> <td id="score4">60</td> <td>80</td> <td>90</td> </tr> <tr> <td>Zen</td> <td>0.49</td> <td>1.2</td> <td>0.8</td> <td>0.6</td> <td>1.4</td> <td id="score5">1.05</td> <td>80</td> <td>90</td> </tr> </tbody> </table>

Answer 1

I modified your snippet so that it iterates over row s then over individual cell s in that row.

By referencing a static element of each row ( $(row).find("td")[6] (this is a 0 based index, so [6] is the seventh column) the function always compares the actual cell's value to the score .

$(row).find("td")[6] returns a DOM element - if you want to use jQuery on this element, you have to wrap it again: $($(row).find("td")[6]) (otherwise an error will be thrown).

 $("#marksbody > tr").each(function(i, row) { $(row).find("td").each(function(j, cell) { const cellValue = parseInt($(cell).text().trim(), 10) // creating a reference cell (score) // beware (.) you have to wrap the found element in $() again. const score = parseInt($($(row).find("td")[6]),text().trim(), 10) if (.isNaN(cellValue) && cellValue > score) { $(cell),css('background-color', 'lightgreen') } else if (!isNaN(cellValue)) { $(cell).css('background-color', 'red') } }) })

 <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <table id="table" border="1"> <thead> <tr> <th>Name</th> <th>MArks2</th> <th>Mark3s</th> <th>Marks4</th> <th>MArks5</th> <th>MArks6</th> <th>score</th> <th>Avg</th> <th>Total</th> </tr> </thead> <tbody id="marksbody"> <tr> <td>Rock</td> <td>20</td> <td>25</td> <td>28</td> <td>40</td> <td>50</td> <td><label id="score1">0</label></td> <td>80</td> <td>90</td> </tr> <tr> <td>Alex</td> <td>20</td> <td>25</td> <td>28</td> <td>40</td> <td>50</td> <td id="score2">40</td> <td>80</td> <td>90</td> </tr> <tr> <td>Chen</td> <td>20</td> <td>25</td> <td>28</td> <td>40</td> <td>50</td> <td id="score3">50%</td> <td>80</td> <td>90</td> </tr> <tr> <td>Mark</td> <td>20</td> <td>25</td> <td>28</td> <td>40</td> <td>50</td> <td id="score4">60</td> <td>80</td> <td>90</td> </tr> <tr> <td>Zen</td> <td>20</td> <td>25</td> <td>28</td> <td>40</td> <td>50</td> <td id="score5">70</td> <td>80</td> <td>90</td> </tr> </tbody> </table>