javascript - 迭代表格行和单元格并更改特定样式

Question

我试图循环遍历每一行以检查该特定人的标记，并将其与仅该人的分数列值进行比较。如果**

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

** 我可以为单元格着色，但它只考虑第一行的得分值。我想了解我在这里缺少什么？

$('#'+'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

我修改了您的代码片段，以便它遍历行，然后遍历该行中的各个单元格。

通过引用每行的静态元素 ($(row).find("td")[6] (这是基于 0 的索引，因此 [6] 是第七列)该函数始终将实际单元格的值与分数进行比较。

$(row).find("td")[6] 返回一个 DOM 元素 - 如果你想在这个元素上使用 jQuery，你必须再次包装它: $ ($(row).find("td")[6]) (否则会抛出错误)。

$("#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>