Generate a marksheet with some conditions - javascript

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>

Related

How to detect, and color the left or right block of each table, depending on conditions and random values ​by JavaScript-jQ

setInterval(function () {
for (var i = 1; i <= 5; i++) {
var number = 1 + Math.floor(Math.random() * 100);
var getNum = $('#res' + i).html(number);
if (getNum.html() >= 50) {
$('#res' + i + 'mult').html("right");
var num = 1;
for (var j = 1; j <= 6; j++) {
$("#row" + num++ + "-" + 2).css("background-color", 'red');
}
} else {
var num2 = 1;
$('#res' + i + 'mult').html("left");
$("#row" + num2++ + "-" + num2).css("background-color", 'yellow');
}
}
},
1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<script src="../!Needs/jquery.min.js"></script>
<style>
body {
font-size: 20px;
}
table {
width: 200px;
}
#shapedive {
height: 500px;
border-radius: 30pt;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<table id="bigTable" border="1" style="text-align: center;">
<tr>
<td style="font-weight: bold">Pin</td>
<td style="font-weight: bold">Number</td>
<td style="font-weight: bold">Direction</td>
</tr>
<tr>
<td class=pin>1</td>
<td id="res1"></td>
<td id="res1mult"></td>
</tr>
<tr>
<td class=pin>2</td>
<td id="res2"></td>
<td id="res2mult"></td>
</tr>
<tr>
<td class=pin>3</td>
<td id="res3"></td>
<td id="res3mult"></td>
</tr>
<tr>
<td class=pin>4</td>
<td id="res4"></td>
<td id="res4mult"></td>
</tr>
<tr>
<td class=pin>5</td>
<td id="res5"></td>
<td id="res5mult"></td>
</table>
</td>
</tr>
<tr>
<td id="shape">
<div id="shapedive">
<table style="text-align: center" border="1">
<tr>
<td id="row1-1">*</td>
<td id="row1-2">Starter</td>
<td id="row1-3">*</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row2-1">1</td>
<td id="row2-2">2</td>
<td id="row2-3">3</td>
<td id="row2-4">4</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row3-1">1</td>
<td id="row3-2">2</td>
<td id="row3-3">3</td>
<td id="row3-4">4</td>
<td id="row3-5">5</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row4-1">1</td>
<td id="row4-2">2</td>
<td id="row4-3">3</td>
<td id="row4-4">4</td>
<td id="row4-5">5</td>
<td id="row4-6">6</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row5-1">1</td>
<td id="row5-2">2</td>
<td id="row5-3">3</td>
<td id="row5-4">4</td>
<td id="row5-5">5</td>
<td id="row5-6">6</td>
<td id="row5-7">7</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row6-1">1</td>
<td id="row6-2">2</td>
<td id="row6-3">3</td>
<td id="row6-4">4</td>
<td id="row6-5">5</td>
<td id="row6-6">6</td>
<td id="row6-7">7</td>
<td id="row6-8">8</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<br>
</body>
</html>
I am trying to make a simple game. We have two tables. The table on the top, which has 5 rows and 3 columns - including: pin, random number and direction (left or right) - and the bottom table which has 6 rows. The cell at the first row and second column ($("#row1-2")) is the beginning of our game.
The Left/Right values in the top table determine the direction, left or right, of the cell that should be painted in the corresponding row in the bottom table.
We have a simple condition to get a direction value. We generate a random number. If the random number is > 50, the direction is set to "right"; otherwise, it is set to "left".
That is, if, for example, the values ​​in the top table were as follows:
Pin 1 => 28 => Left
Pin 2 => 9 => Left
Pin 3 => 56 => Right
Pin 4 => 99 => Right
Pin 5 => 14 => Left
Then, in the bottom table, the game is started from the starter column, and as we incrementally descend the rows, the column that gets painted is determined by the "left" or "right" values that were generated above.
In the bottom table, because the value of pin 1 (28) is less than 50, the painted column will move to the "left" from the starter block $("#row1-2"): $("#row2-2").
And because the value of pin 2 (9) also maps to "left", the painted column in the next row should also be to the "left": $("#row3-2").
For pin 3, we have "right", so the column in the next row to the right of the last painted cell should be painted: $("#row4-3").
...and so on until all the rows have a painted cell.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<script src="../!Needs/jquery.min.js"></script>
<style>
body {
font-size: 20px;
}
table {
width: 200px;
}
#shapedive {
height: 500px;
border-radius: 30pt;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<table id="bigTable" border="1" style="text-align: center;">
<tr>
<td style="font-weight: bold">Pin</td>
<td style="font-weight: bold">Number</td>
<td style="font-weight: bold">Direction</td>
</tr>
<tr>
<td class=pin>1</td>
<td id="res1"></td>
<td id="res1mult"></td>
</tr>
<tr>
<td class=pin>2</td>
<td id="res2"></td>
<td id="res2mult"></td>
</tr>
<tr>
<td class=pin>3</td>
<td id="res3"></td>
<td id="res3mult"></td>
</tr>
<tr>
<td class=pin>4</td>
<td id="res4"></td>
<td id="res4mult"></td>
</tr>
<tr>
<td class=pin>5</td>
<td id="res5"></td>
<td id="res5mult"></td>
</table>
</td>
</tr>
<tr>
<td id="shape">
<div id="shapedive">
<table style="text-align: center" border="1">
<tr>
<td id="row1-1">*</td>
<td id="row1-2">Starter</td>
<td id="row1-3">*</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row2-1">1</td>
<td id="row2-2">2</td>
<td id="row2-3">3</td>
<td id="row2-4">4</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row3-1">1</td>
<td id="row3-2">2</td>
<td id="row3-3">3</td>
<td id="row3-4">4</td>
<td id="row3-5">5</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row4-1">1</td>
<td id="row4-2">2</td>
<td id="row4-3">3</td>
<td id="row4-4">4</td>
<td id="row4-5">5</td>
<td id="row4-6">6</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row5-1">1</td>
<td id="row5-2">2</td>
<td id="row5-3">3</td>
<td id="row5-4">4</td>
<td id="row5-5">5</td>
<td id="row5-6">6</td>
<td id="row5-7">7</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row6-1">1</td>
<td id="row6-2">2</td>
<td id="row6-3">3</td>
<td id="row6-4">4</td>
<td id="row6-5">5</td>
<td id="row6-6">6</td>
<td id="row6-7">7</td>
<td id="row6-8">8</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<br>
<script>
setInterval(function () {
for (var i = 1; i <= 5; i++) {
var number = 1 + Math.floor(Math.random() * 100);
var getNum = $('#res' + i).html(number);
if (getNum.html() >= 50) {
$('#res' + i + 'mult').html("right");
var num = 1;
for (var j = 1; j <= 6; j++) {
$("#row" + num++ + "-" + 2).css("background-color", 'red');
}
} else {
var num2 = 1;
$('#res' + i + 'mult').html("left");
$("#row" + num2++ + "-" + num2).css("background-color", 'yellow');
}
}
},
1000);
</script>
</body>
</html>

I find it very difficult to synchronize the cells in the top table with those in the second. One problem is that row 1 in the first table has a left/right value; but in the second table, row 1 is the Starter - the left/right decisions don't start until row 2. I would simplify this by making the corresponding rows in the two tables have the same number. I would also 0-index the rows and columns (as opposed to having them start at 1) because this is easier for my brain as it is consistent with arrays and typical loops.
To determine which column is active as we descend the table, it was helpful for me to realize that a "left" step means the column index stays the same in the next row, and a "right" step means the index increases by 1.
We can declare a variable to track the current column. We will start it at 1 since we know the "Starter" is at the [1] index of its row: const col = 1;. Then, as we loop through the rows, we increment col by 1 if we are stepping right or 0 if we are stepping left.
We can package our game logic into a play function and invoke it once - play() - or at an interval - setInterval(play, 1000).
const play = () => {
let col = 1;
// reset the game board
$('td').css('background-color', 'white');
$('td#starter').css('background-color', 'red');
for (let row = 0; row < 6; row++) {
const pin = 1 + Math.floor(Math.random() * 100);
const isRight = pin > 50;
col += (isRight ? 1 : 0);
$(`#res${row}`).text(pin);
$(`#res${row}mult`).text(isRight ? 'right' : 'left');
$(`#row${row}-${col}`).css("background-color", isRight ? 'yellow' : 'red');
}
};
play();
//setInterval(play, 1000);
body {
font-size: 20px;
}
table {
width: 200px;
}
#shapedive {
height: 500px;
border-radius: 30pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<table id="bigTable" border="1" style="text-align: center;">
<tr>
<td style="font-weight: bold">Pin</td>
<td style="font-weight: bold">Number</td>
<td style="font-weight: bold">Direction</td>
</tr>
<tr>
<td class=pin>1</td>
<td id="res0"></td>
<td id="res0mult"></td>
</tr>
<tr>
<td class=pin>2</td>
<td id="res1"></td>
<td id="res1mult"></td>
</tr>
<tr>
<td class=pin>3</td>
<td id="res2"></td>
<td id="res2mult"></td>
</tr>
<tr>
<td class=pin>4</td>
<td id="res3"></td>
<td id="res3mult"></td>
</tr>
<tr>
<td class=pin>5</td>
<td id="res4"></td>
<td id="res4mult"></td>
</table>
</td>
</tr>
<tr>
<td id="shape">
<div id="shapedive">
<table style="text-align: center" border="1">
<tr>
<td>*</td>
<td id="starter">Starter</td>
<td>*</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row0-0">1</td>
<td id="row0-1">2</td>
<td id="row0-2">3</td>
<td id="row0-3">4</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row1-0">1</td>
<td id="row1-1">2</td>
<td id="row1-2">3</td>
<td id="row1-3">4</td>
<td id="row1-4">5</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row2-0">1</td>
<td id="row2-1">2</td>
<td id="row2-2">3</td>
<td id="row2-3">4</td>
<td id="row2-4">5</td>
<td id="row2-5">6</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row3-0">1</td>
<td id="row3-1">2</td>
<td id="row3-2">3</td>
<td id="row3-3">4</td>
<td id="row3-4">5</td>
<td id="row3-5">6</td>
<td id="row3-6">7</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row4-0">1</td>
<td id="row4-1">2</td>
<td id="row4-2">3</td>
<td id="row4-3">4</td>
<td id="row4-4">5</td>
<td id="row4-5">6</td>
<td id="row4-6">7</td>
<td id="row4-7">8</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
I have also created an example fiddle.

How to calculate the difference of two values in a <td> tag in another <td> tag in HTML

I have a table in HTML which is rendered and it is like,
{% for element in combined_list %}
<td id='first'>element.first</td>
<td id='second'>element.second</td>
<td id='diff>I want the difference of first and second here</td>
{% endfor %}
I tried with jQuery also like:
jQuery(document).ready(function($) {
let first_= jQuery('#first','/^[0-9]*$/' ).text();
let second_ = jQuery('#second').html();
let diff = first_- second_ ;
$('#diff').html(diff)
});
But Im getting for only one column. Thanks in advance.

You can't have multiple column with the same id, use class instead
$(document).ready(function(){
var rows = document.getElementById("table").getElementsByTagName("tr");
for(var i = 0; i < rows.length; i++)
{
var first = parseInt(rows[i].getElementsByClassName("first")[0].textContent);
var second = parseInt(rows[i].getElementsByClassName("second")[0].textContent);
var diff = first - second;
console.log("First: "+first+" - second : "+second+" = "+diff);
rows[i].getElementsByClassName("diff")[0].textContent = diff;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table'>
<tr>
<td class='first'>5</td>
<td class='second'>4</td>
<td class='diff'>diffhere</td>
</tr>
<tr>
<td class='first'>9</td>
<td class='second'>3</td>
<td class='diff'>diffhere</td>
</tr>
</table>

You have a typo in the second id - missing quote
IDs need to be unique so use instead a class and you can loop over all the first columns
you can use relative addressing via .next and/or .closest to get the other columns
$(function() {
$("#tb .first").each(function() {
const val1 = +$(this).text();
const val2 = +$(this).next().text();
$(this).closest("tr").find(".diff").text(val1 - val2);
})
})
td {
border: 1px solid black;
padding: 3px;
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1st</th>
<th>2nd</th>
<th>Diff</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td class="first">11</td>
<td class="second">9</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">12</td>
<td class="second">8</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">13</td>
<td class="second">7</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">14</td>
<td class="second">6</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">15</td>
<td class="second">5</td>
<td class="diff"></td>
</tr>
</tbody>
</table>
Plain JS
window.addEventListener('load', function() {
[...document.querySelectorAll('#tb .first')].forEach(cell => {
const parent = cell.closest('tr');
const val1 = +cell.textContent;
const val2 = +parent.querySelector('.second').textContent;
parent.querySelector('.diff').textContent = val1 - val2;
})
})
td {
border: 1px solid black;
padding: 3px;
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1st</th>
<th>2nd</th>
<th>Diff</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td class="first">11</td>
<td class="second">9</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">12</td>
<td class="second">8</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">13</td>
<td class="second">7</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">14</td>
<td class="second">6</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">15</td>
<td class="second">5</td>
<td class="diff"></td>
</tr>
</tbody>
</table>

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().

How to pass check box value to php ? (javascript)

I have table and with check box(able to checkall), how do i pass the value from check box to another page? should i write javascript function or using PHP for better solution. For example , when checkbox is checked pass checkbox value , if not checked pass 0
This is my table:
<table border="1">
<thead>
<tr>
<th><input type="checkbox" id="chkAll" onclick="allChecked(this.checked);"/></th>
<th>Invoice No.</th>
<th>Invoice Date</th>
<th>Due Date</th>
<th>Invoice Amount</th>
<th>Open Amount</th>
</tr>
</thead>
<form id="frmPaySelected">
<tbody>
<tr>
<td><input type="checkbox" name="invoice_no[]" value="IN000001" onclick="addTotal(this.checked, 1500.00);"/></td>
<td>IN000001</td>
<td align="right">11 Jan, 2018</td>
<td align="right">10 Feb, 2018</td>
<td align="right">1,500.00</td>
<td align="right">1,500.00</td>
</tr>
<tr>
<td><input type="checkbox" name="invoice_no[]" value="IN000003" onclick="addTotal(this.checked, 1500.00);"/></td>
<td>IN000003</td>
<td align="right">16 Jan, 2018</td>
<td align="right">15 Feb, 2018</td>
<td align="right">2,150.00</td>
<td align="right">1,500.00</td>
</tr>
<tr>
<td><input type="checkbox" name="invoice_no[]" value="IN000004" onclick="addTotal(this.checked, 259.50);"/></td>
<td>IN000004</td>
<td align="right">30 Jan, 2018</td>
<td align="right">31 Mar, 2018</td>
<td align="right">900.00</td>
<td align="right">259.50</td>
</tr>
<tr>
<td colspan="4" align="right"><strong>Total: </strong></td>
<td><div style="text-align:right; font-weight:bold;">5,538.25</div></td>
<td><div id="divTotalPayAmount" style="text-align:right; font-weight:bold;">0.00</div></td>
</tr>
<tr>
<td colspan="6" align="right"><input type="button" value="Pay Selected" onclick="alert('Submit Selected!');"/></td>
</tr>
</tbody>
</form>
</table>
"javascript checkbox function"
<script language="JavaScript">
var totalOpenAmount = 0;
var blnUpdateCheckAll = true;
function allChecked(checkValue) {
var chkInvoices = document.getElementsByName('invoice_no[]');
blnUpdateCheckAll = false;
for(i = 0; i < chkInvoices.length; i++) {
if(chkInvoices[i].checked != checkValue)
chkInvoices[i].click();
}
blnUpdateCheckAll = true;
}
function updateAllChecked() {
var chkInvoices = document.getElementsByName('invoice_no[]');
var c = 0;
for(i = 0; i < chkInvoices.length; i++) {
if(chkInvoices[i].checked)
c++;
}
if(c < i)
document.getElementById('chkAll').checked = false;
else
document.getElementById('chkAll').checked = true;
}
function addTotal(checkValue, openAmount) {
if(checkValue)
totalOpenAmount += openAmount;
else
totalOpenAmount -= openAmount;
if(blnUpdateCheckAll) updateAllChecked();
document.getElementById('divTotalPayAmount').innerHTML = totalOpenAmount.toFixed(2).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
}
</script>

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.

Categories

Resources