How to hightlight all text in a column?-CodePudding

I have a form to enter scores and calculate the average score. After entering the form, the user clicks on the submit button, it will display a table of scores that have been entered before along with 2 buttons but the average score column must show the value "?". Then, when user click the "Calculate the average score" button will calculate the average scores and replace the "?" value, the "Best student" button will determine if any average score is >= 8 the letter in that column will be highlighted in red. My problem is how to determine if any average score is >= 8 the text in that column will be highlighted in red.

HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Project 3 - Jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/main.css" />
    <script src="js/app.js"></script>
  </head>
  <body>
      <body>
        <h1 align="center" >Class Marksheet</h1>

        <!--Form for users to enter scores-->
        <table align="center" >
          <tr>
            <td>Name:</td>
            <td><input name="name" id="name" type="text" /></td>
          </tr>

          <tr>
            <td>Math:</td>
            <td>
              <input name="math" min="0" max="10" id="math" type="number" />
            </td>
          </tr>

          <tr>
            <td>Physics:</td>
            <td>
              <input
                name="physics"
                min="0"
                max="10"
                id="physics"
                type="number"
              />
            </td>
          </tr>

          <tr>
            <td>Chemistry:</td>
            <td>
              <input
                name="chemical"
                min="0"
                max="10"
                id="chemical"
                type="number"
              />
            </td>
          </tr>

          <td>
            <button type="submit" id="show_table">Submit</button>
          </td>
        </table>

        <!--After the user enters the score and click the submits button this table will be displayed with the 2 buttons below-->
        <div id="divTable">
          <table
            id="tableScore"
            
            border="5"
            align="center"
          >
            <th>No</th>
            <th>Name</th>
            <th>Math</th>
            <th>Physics</th>
            <th>Chemistry</th>
            <th>Average Score</th> <!--This column will display the value "?"-->
          </table>

          <!--Click this button to calculate the average score and replace the value "?"-->
          <button  id="showAvg" align="center">
            Calculate the average score
          </button>

          <!--Determine if any average score is >= 8 the letter in that column will be highlighted in red-->
          <button id="showBest" align="center">
            Best student
          </button>
        </div>
      </body>
    </html>
  </body>
</html>

JS File:

var testScore = { 
    name: "",
    math: 0,
    physical: 0,
    chemistry: 0,
    avg: 0
};

var i = 1;

// This will display the table and the average score has "?" value
$(function() {
    $('#show_table').click(function() {
        $('#divTable').css("display","block");
        var name = $("#name").val();
        var math = $("#math").val();
        var physics = $("#physics").val();
        var chemical = $("#chemical").val();
        $('#divTable').css("display","block");
        
        $("#name").val("");
        $("#math").val("");
        $("#physics").val("");
        $("#chemical").val("");

        var html = "<tr>";
        html  = "<td>"   i   "</td>";
        html  = "<td>"   name   "</td>";
        html  = "<td>"   math   "</td>";
        html  = "<td>"   physics   "</td>";
        html  = "<td>"   chemical   "</td>";
        html  =  "<td>?</td>";

        
        $('#divTable table').append(html);
        i  ;
    });
});

// Calculate the average score and replace "?" value
$('#showAvg').click(function(){
        $("#tableScore tr").each(function() {
            var math = parseFloat($(this).find("td:eq(2)").text());
            var physics= parseFloat($(this).find("td:eq(3)").text());
            var chemistry= parseFloat($(this).find("td:eq(4)").text());
            var avg = ((math   physics   chemistry)/3).toFixed(1);
            $(this).find("td:eq(5)").text(avg);
        });
    });

// If average score >= 8 the letter will be red. I need help
$('#showBest').click(function(){
        
});

CSS File:

#divTable {
  display: none;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

CodePudding user response：

For each row, find the average score and if it is > 8 then highlight the row:

$('#showBest').click(function(){
    $('#tableScore tr').each(function(){
        if ($(this).find('td:eq(5)').text() > 8) {
            $(this).addClass('highlight');
            // If you prefer to highlight just a column in this row, not the whole row:
            // $(this).find('td:eq(5)').addClass('highlight')
        }
    })
});

CSS:

.highlight {
    background-color: red;
}