Develop Reference

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>

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/bootstrap#5.0.2/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>

Attempting to sum html tables results in numbers being concatenated like strings?

While trying to get the sum total of the values of an html table column, my variable is returning concatenated strings: instead of 1 + 2 + 3 = 6, I am seeing 1 + 2 + 3 = 123.
The "votes" column values are incremented by an ajax call when the users click on the colors, which is correct. But I also hope to see the sum of all values when "total" is clicked.
Jquery:
$('#total').on('click', function() {
var sumofval = 0;
$(".val").each(function () {
sumofval = sumofval + ($(this).html());
$('#totalr').html(sumofval);
console.log(sumofval);
});
});
The HTML Color-Votes Table:
<table id="tcol" style="width:60%;">
<thead>
<tr>
<th>Color</th>
<th>Votes</th>
</tr>
</thead>
<tr>
<td id="red">Red</td>
<td id="redr" class="val"></td>
</tr>
<tr>
<td id="orange">Orange</td>
<td id="oranger" class="val"></td>
</tr>
<tr>
<td id="yellow">Yellow</td>
<td id="yellowr" class="val"></td>
</tr>
<tr>
<td id="green">Green</td>
<td id="greenr" class="val"></td>
</tr>
<tr>
<td id="blue">Blue</td>
<td id="bluer" class="val"></td>
</tr>
<tr>
<td id="indigo">Indigo</td>
<td id="indigor" class="val"></td>
</tr>
<tr>
<td id="total">TOTAL</td>
<td id="totalr"></td>
</tr>
</table>

Convert it to number. (You can do it by adding + at the start, or using parseInt function)
sumofval = sumofval +.. can be replaced with sumofval+=..
do $('#totalr').html(sumofval); at each step in the loop is redandent. better do it once at the end
$('#total').on('click', function() {
var sumofval = 0;
$(".val").each(function () {
sumofval += +$(this).html() || 0;
});
$('#totalr').html(sumofval);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tcol" style="width:60%;">
<thead>
<tr>
<th>Color</th>
<th>Votes</th>
</tr>
</thead>
<tr>
<td id="red">Red</td>
<td id="redr" class="val"></td>
</tr>
<tr>
<td id="orange">Orange</td>
<td id="oranger" class="val">2</td>
</tr>
<tr>
<td id="yellow">Yellow</td>
<td id="yellowr" class="val">3</td>
</tr>
<tr>
<td id="green">Green</td>
<td id="greenr" class="val">4</td>
</tr>
<tr>
<td id="blue">Blue</td>
<td id="bluer" class="val">5</td>
</tr>
<tr>
<td id="indigo">Indigo</td>
<td id="indigor" class="val">6</td>
</tr>
<tr>
<td id="total">TOTAL</td>
<td id="totalr"></td>
</tr>
Also you can do:
$('#totalr').html(Array.from($(".val")).reduce(function(a,b){return (+$(b).html() ||0)+a}, 0));

If one term isn't a number, JavaScript will treat everything as string and concatenate the values instead. So you need to make sure the value's you're adding up are all number types:
$('#total').on('click', function() {
var sumofval = 0;
$(".val").each(function () {
sumofval = sumofval + getInt($(this).html());
$('#totalr').html(sumofval); //this line should be moved outside .each loop
console.log(sumofval);
)};
});
function getInt(t){
if(!isNaN(parseFloat(t)) && isFinite(t)){
return parseInt(t,10);
}
return 0;
}

As suggested, use parseInt to parse strings and convert them to integers. Then you can add them to the sumofval correctly.
$('#total').on('click', function() {
var sumofval = 0;
$(".val").each(function() {
if ($(this).text() !== '') {
sumofval = sumofval + parseInt(($(this).text()));
$('#totalr').text(sumofval);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tcol" style="width:60%;">
<thead>
<tr>
<th>Color</th>
<th>Votes</th>
</tr>
</thead>
<tr>
<td id="red">Red</td>
<td id="redr" class="val">2</td>
</tr>
<tr>
<td id="orange">Orange</td>
<td id="oranger" class="val"></td>
</tr>
<tr>
<td id="yellow">Yellow</td>
<td id="yellowr" class="val">3</td>
</tr>
<tr>
<td id="green">Green</td>
<td id="greenr" class="val">3</td>
</tr>
<tr>
<td id="blue">Blue</td>
<td id="bluer" class="val">3</td>
</tr>
<tr>
<td id="indigo">Indigo</td>
<td id="indigor" class="val">3</td>
</tr>
<tr>
<td id="total">TOTAL</td>
<td id="totalr"></td>
</tr>
</table>
Also, consider using .text() to get the value of the element instead of .html().

Grab every TD then format it to currency

i'm pretty new to JS and after searching through the web, docs, friends and another questions here on stackoverflow I've gotten until this point. Now I can't get pass it.
$(document).ready(function() {
var $table = $("table.valores");
if ($table.length > 0) {
var ValorTh = $("th.header:contains('Valor')");
var ValorColumnIndex = $(ValorTh).index();
var Valor_rows = $($table).find('tr');
$(Valor_rows).each(function() {
$(this).find('td').eq(ValorColumnIndex).toLocaleString('pt-BR',{style:'currency', currency: 'BRL'});
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="valores">
<thead><th class="header">Valor</th></thead>
<tbody>
<tr>
<td>15.00</td>
</tr>
<tr>
<td >16.00</td>
</tr>
<tr>
<td >17.00</td>
</tr>
<tr>
<td >18.00</td>
</tr>
<tr>
<td >19.00</td>
</tr>
<tr>
<td >20.00</td>
</tr>
</tbody>
</table>
I can't get the following to work and properly format the td's value :C
toLocaleString('pt-BR',{style:'currency', currency: 'BRL'});

You need to actually set the content of the tds. Now, you don't change the content of the elements. Try this:
$(document).ready(function() {
var $table = $("table.valores");
if ($table.length > 0) {
var ValorTh = $("th.header:contains('Valor')");
var ValorColumnIndex = $(ValorTh).index();
var Valor_rows = $($table).find('tr');
$(Valor_rows).each(function() {
var $td = $(this).find('td').eq(ValorColumnIndex);
var formatted = Number($td.text()).toLocaleString('pt-BR', {style:'currency', currency: 'BRL'});
$td.text(formatted); // <-- here, you need to set the value
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="valores">
<thead><th class="header">Valor</th></thead>
<tbody>
<tr>
<td>15.00</td>
</tr>
<tr>
<td >16.00</td>
</tr>
<tr>
<td >17.00</td>
</tr>
<tr>
<td >18.00</td>
</tr>
<tr>
<td >19.00</td>
</tr>
<tr>
<td >20.00</td>
</tr>
</tbody>
</table>

It's because toLocaleString is a prototype of Number and not string
$(document).ready(function() {
var $table = $("table.valores tbody");
$table.find("td").each(function(i,el){
try{
$(el).text(parseFloat($(el).text()).toLocaleString('pt-BR', {style:'currency', currency: 'BRL'}));
}catch(e){
//not a number
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="valores">
<thead><th class="header">Valor</th></thead>
<tbody>
<tr>
<td>15.00</td>
</tr>
<tr>
<td >16.00</td>
</tr>
<tr>
<td >17.00</td>
</tr>
<tr>
<td >18.00</td>
</tr>
<tr>
<td >19.00</td>
</tr>
<tr>
<td >20.00</td>
</tr>
</tbody>
</table>

Grab values from row if cell[X] has written input

Hello everyone right now I'm trying to retrieve informatmion inside a table, I currently have this example in order to retrieve all the row values if value="!= null", but if I remove the attribute value="" in my inputs I can't grab the information I type inside the inputs
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value="123"></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value=""></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value=""></td>
</tr>
</tbody>
</table>
<button onclick="aplicar()">Aplicar</button>
<script>
</script>
<script>
function aplicar(){
var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""])');
var tableData = [];
Array.from(myTab).forEach(input => {
var tds = input.closest('tr').children;
var obj = {};
obj.A = tds[0].textContent;
obj.B = tds[1].textContent;
obj.C = tds[2].textContent;
obj.D = tds[3].textContent;
obj.E = input.value;
tableData.push(obj);
});
console.log(tableData);
}
</script>
This will input the first row data because it has 123 value inside, but I need to remove the value attribute and get the data I type inside the input.
I will post this information using AJAX at the end.

You can set the value attribute on input event:
function setValueAttr(el){
el.setAttribute('value', el.value)
}
function aplicar(){
var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""])');
var tableData = [];
Array.from(myTab).forEach(input => {
var tds = input.closest('tr').children;
var obj = {};
obj.A = tds[0].textContent;
obj.B = tds[1].textContent;
obj.C = tds[2].textContent;
obj.D = tds[3].textContent;
obj.E = input.value;
tableData.push(obj);
});
console.log(tableData);
}
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" oninput="setValueAttr(this)" value="123"></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" oninput="setValueAttr(this)" value=""></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" oninput="setValueAttr(this)" value=""></td>
</tr>
</tbody>
</table>
<button type="button" onclick="aplicar()">Aplicar</button>
OR: You can directly check the value of the element with if condition
function aplicar(){
var myTab = document.querySelectorAll('.txtID');
var tableData = [];
Array.from(myTab).forEach(input => {
if(input.value.trim() != ""){
var tds = input.closest('tr').children;
var obj = {};
obj.A = tds[0].textContent;
obj.B = tds[1].textContent;
obj.C = tds[2].textContent;
obj.D = tds[3].textContent;
obj.E = input.value;
tableData.push(obj);
}
});
console.log(tableData);
}
<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value="123"></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value=""></td>
</tr>
<tr>
<td align="center">val1</td>
<td align="center">val2</td>
<td align="center">val3</td>
<td align="center">1500</td>
<td align="center" class="myID"><input type="number" name="txtID" class="txtID" value=""></td>
</tr>
</tbody>
</table>
<button type="button" onclick="aplicar()">Aplicar</button>

add sum of the a table with multiple header

I have drupal view that generate one table split to multiple table thead and tbody, I need to sum the total of the columns and rows per tbody and not for all the table
I have this code, see code here
HTML
<table id="sum_table" width="300" border="1">
<thead>
<tr class="titlerow">
<td></td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="rowBB">4</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="rowBB">4</td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</tbody>
<thead>
<tr class="titlerow">
<td></td>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">11</td>
<td class="rowAA">22</td>
<td class="rowBB">33</td>
<td class="rowBB">44</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">11</td>
<td class="rowAA">22</td>
<td class="rowBB">33</td>
<td class="rowBB">44</td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</tbody>
<thead>
<tr class="titlerow">
<td></td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">111</td>
<td class="rowAA">222</td>
<td class="rowBB">333</td>
<td class="rowBB">444</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">111</td>
<td class="rowAA">222</td>
<td class="rowBB">333</td>
<td class="rowBB">444</td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</tbody>
</table>
CSS
#sum_table {
white-space: nowrap;
}
#sum_table td {
padding: 5px 10px;
}
JavaScript in onLoad
$("#sum_table tr:not(:first,:last) td:last-child").text(function(){
var t = 0;
$(this).prevAll().each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return t;
});
$("#sum_table tr:last td:not(:first,:last)").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(i+2)+")").each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return "Total: " + t;
});
How can I sum total after every category?
Thanks a lot

Here is a FIDDLE that does most of what you want.
I just saw your comment about the totals after every tbody...I'll have to work on it a bit more. Still doable.
JS
var totrow = 0, totcol=0; //setting totalsforrow and totalsforcolumns variables to zero
$('.numrow').each( function(){ //for each of the rows with class='numrow'
for(var n=1; n<5; n++) //do a loop four times for the right column totals
{
totrow = totrow + parseInt( $(this).children("td:eq("+ n +")").text() );
} //grab the values of each of the four tds and add them together
$( $(this).children('td:eq(5)') ).html(totrow); //put the summed value in the 'total' td
totrow = 0; // reset the value for the next "each .numrow"
});
for(var m = 1; m < 5; m++) //for loop for four column totals
{
$('.numrow').each( function(){ // for each of the rows with class .numrow
totcol = totcol + parseInt($(this).children("td:eq("+ m +")").text() );//add up values
console.log(totcol); // just a view of the totcol printed to the console log
});
$( "#sum_table tr:eq(11) td:eq(" + m + ")" ).html( 'Col total: ' + totcol );//put total at bottom of column
totcol = 0; //reset total to get read for the next loop
}
Edit: Here's the update FIDDLE. It's brute-force, inelegant, but it works.