JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<table width="80%" align="center">
      <thead>
        <tr align="left">
          <th>STU ID</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Tamil</th>
          <th>English</th>
          <th>Maths</th>
          <th>Science</th>
          <th>Social Science</th>
          <th>Result</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>STU0001</td>
          <td>Muthu</td>
          <td>Bakkiyanathan</td>
          <td name="sub">89</td>
          <td name="sub">34</td>
          <td name="sub">45</td>
          <td name="sub">33</td>
          <td name="sub">60</td>
          <td name="result"></td>
        </tr>
        <tr>
          <td>STU0002</td>
          <td>Bharath G</td>
          <td>Suresh G</td>
          <td name="sub">89</td>
          <td name="sub">88</td>
          <td name="sub">56</td>
          <td name="sub">60</td>
          <td name="sub">60</td>
          <td name="result"></td>
        </tr>
        <tr>
          <td>STU0003</td>
          <td>Manoj</td>
          <td>Krishnasamy</td>
          <td name="sub">89</td>
          <td name="sub">90</td>
          <td name="sub">99</td>
          <td name="sub">96</td>
          <td name="sub">100</td>
          <td name="result"></td>
        </tr>
      </tbody>
    </table>

JavaScript

$(document).ready(function() {
      $('tr [name="sub"]').each(function() {
        var mark = parseFloat($(this).text());
        if (mark < 35) {
          $(this).css("color", "red");
        }else {
          $(this).css("color", "green");
        }        
      });

      $('tr').each(function(){
        var sub = $(this).find('[name="sub"]');
        for(i=0; i<5; i++) {
          if ($(sub[i]).text()<35) {
            $(this).find('[name="result"]').text("Fail");
            $(this).find('[name="result"]').css("color", "red");
            break;
          }
          else{
            $(this).find('[name="result"]').text("Pass");
            $(this).find('[name="result"]').css("color", "green");
          }
        }
      });
    });