USer12345
USer12345

Reputation: 39

Generate a marksheet with some conditions

I'm creating a mark-sheet for my PHP project where I have used JS to determine whether a student is 'pass' or 'fail'.

It checks the sum of 'pass' marks and the obtained marks. If a student gets 0 in one subject but the total is more than the required pass marks then it shows PASS in the result field which I don't want. I want JS to check if it's 0 in any subject and show fail.

Any help is much appreciated. I'm very new to JS. Please guide me.

$(function() {
  var TotalValue = 0;
  $("tr #data").each(function(index, value) {
    currentRow = parseFloat($(this).text());
    TotalValue += currentRow
  });

  document.getElementById('fulltotal').innerHTML = TotalValue;
  var TotalValue1 = 0;
  
  $("tr #data1").each(function(index, value) {
    currentRow = parseFloat($(this).text());
    TotalValue1 += currentRow
  });

  document.getElementById('passtotal').innerHTML = TotalValue1;
  var TotalValue2 = 0;
  $("tr #data2").each(function(index, value) {
    currentRow = parseFloat($(this).text());
    TotalValue2 += currentRow
  });

  document.getElementById('obtotal').innerHTML = TotalValue2;
});

var ptotal = $("#passtotal").val();
var ototal = $("#obtotal").val();
if (ptotal > ototal) {
  document.getElementById('results').innerHTML = "FAIL";
} else {
  document.getElementById('results').innerHTML = "PASS";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
    <tr>
        <th>Code</th>
        <th>Subject / Course Title</th>
        <th>Maximum Marks</th>
        <th>Pass Marks</th>
        <th>Marks Awarded</th>
    </tr>
</thead>
<tbody>
    <tr class="body-data">
        <td>1</td>
        <td>maths<td>
        <td id="data">100</td>
        <td id="data1">33</td>
        <td id="data2">54</td>
    </tr>
    <tr class="body-data">
        <td>2</td>
        <td>english<td>
        <td id="data">100</td>
        <td id="data1">33</td>
        <td id="data2">12</td>
    </tr>
    <tr class="body-data">
        <td>3</td>
        <td>science<td>
        <td id="data">100</td>
        <td id="data1">33</td>
        <td id="data2">74</td>
    </tr>
    <tr class="body-data">
        <td>4</td>
        <td>social science<td>
        <td id="data">100</td>
        <td id="data1">33</td>
        <td id="data2">0</td>
    </tr>
</tbody>
<tfoot>
    <tr class="total-data">
        <td></td>
        <td style="text-align: right; padding-right: 10px;">TOTAL </td>
        <td style="border-top: 2px solid #2193b0!important;" id="fulltotal"></td>
        <td style="border-top: 2px solid #2193b0!important;" id="passtotal"></td>
        <td style="border-top: 2px solid #2193b0!important;" id="obtotal"></td>
    </tr>
</tfoot>
</table>

Upvotes: 1

Views: 3954

Answers (1)

Kinglish
Kinglish

Reputation: 23654

Here you go, consolidated a bit and normalized to all be jQuery. You seem to be familiar with most of this, but instead of parseFloat, I used the shorthand + which converts the string into a number (float or integer). Also code like this +$(this).find('td').eq(4).text() means find the td with index 3 under me, get its text value and convert into a number. Additionally, in your pass/fail if statement at the end, you were comparing strings, not numbers, so I updated that as well.

$(function() {
  let maxMarks = 0, passMarks = 0, marksAwarded = 0, hasFail = false;
  $("tr").each(function() {
    $(this).find('td').each(function(index) {
      let val = +$(this).text().trim();
      if (index === 2) maxMarks += val;
      else if (index === 3) passMarks += val;
      else if (index === 4) marksAwarded += val;
    });
    if (+$(this).find('td').eq(4).text() < +$(this).find('td').eq(3).text()) hasFail = true;
  });
  $('#fulltotal').html(maxMarks);
  $('#passtotal').html(passMarks);
  $('#obtotal').html(marksAwarded);
  if (marksAwarded < passMarks || hasFail) {
    $('#results').html("FAIL");
  } else {
    $('#results').html("PASS");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<table class='table'>
  <thead>
    <tr>
      <th>Code</th>
      <th>Subject / Course Title</th>
      <th>Maximum Marks</th>
      <th>Pass Marks</th>
      <th>Marks Awarded</th>
    </tr>
  </thead>
  <tbody>
    <tr class="body-data">
      <td>1</td>
      <td>maths
      </td>
      <td id="data">100</td>
      <td id="data1">33</td>
      <td id="data2">54</td>
    </tr>
    <tr class="body-data">
      <td>2</td>
      <td>english
      </td>
      <td id="data">100</td>
      <td id="data1">33</td>
      <td id="data2">12</td>
    </tr>
    <tr class="body-data">
      <td>3</td>
      <td>science
      </td>
      <td id="data">100</td>
      <td id="data1">33</td>
      <td id="data2">74</td>
    </tr>
    <tr class="body-data">
      <td>4</td>
      <td>social science
      </td>
      <td id="data">100</td>
      <td id="data1">33</td>
      <td id="data2">0</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="total-data">
      <td></td>
      <td style="text-align: right; padding-right: 10px;">TOTAL </td>
      <td style="border-top: 2px solid #2193b0!important;" id="fulltotal"></td>
      <td style="border-top: 2px solid #2193b0!important;" id="passtotal"></td>
      <td style="border-top: 2px solid #2193b0!important;" id="obtotal"></td>
    </tr>
  </tfoot>
</table>

Result: <strong id='results'></strong>

Upvotes: 1

Related Questions