Develop Reference

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 get a running sum on HTML table?

I searching a solution for give the running sun to a editable html table, like a spreadsheet:

Hi here is a basic example of what you want using :
The HTML content editable property.
A css class to append a focusout event to the table cell.
A simple loop to sum all values when one value changes.
$('#tbodyTest >tr').on('focusout', 'td.editable', (e) => {
let target = $(e.target),
parent_row = $(e.target).closest('tr'),
previous_row = parent_row.prev();
setTimeout(() => {
if (!isNaN(target.text())) {
$('#tbodyTest').children('tr').each((i,e)=>{
$(e).find('td').last().text(Number($(e).find('td:eq(2)').text()) +Number($(e).prev().find('td').last().text()))
})
}else{
target.text("0");
parent_row.find('td').last().text("0");
$('#tbodyTest').children('tr').each((i,e)=>{
$(e).find('td').last().text(Number($(e).find('td:eq(2)').text()) +Number($(e).prev().find('td').last().text()))
})
}
})
})
.editable {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test" border=1>
<thead>
<th>date</th>
<th>desc</th>
<th>cost</th>
<th>running sum</th>
</thead>
<tbody id="tbodyTest">
<tr>
<td>01-01-2019</td>
<td>a</td>
<td class="editable" contenteditable='true'>1000</td>
<td>1000</td>
</tr>
<tr>
<td>01-02-2019</td>
<td>a</td>
<td class="editable" contenteditable='true'></td>
<td></td>
</tr>
<tr>
<td>01-03-2019</td>
<td>a</td>
<td class="editable" contenteditable='true'></td>
<td></td>
</tr>
<tr>
<td>01-04-2019</td>
<td>a</td>
<td class="editable" contenteditable='true'></td>
<td></td>
</tr>
</tbody>
</table>
Keep in mind that this is a basic example and you will probably add more stuff according to your needs since your ask is simple as well.
Hope it helps

Anyone still looking to this.
$('tr').each(function(index, el) {
if (index == 0) {
$(this).find('.running-balance').text($(this).find('.amount').text());
} else {
var prevRow = $(this).prev();
var prevBalance = Number(prevRow.find('.running-balance').text());
var currentAmount = Number($(this).find('.amount').text());
var newBalance = prevBalance + currentAmount;
$(this).find('.running-balance').text(newBalance.toFixed(2));
}
});
td,
th {
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Description</th>
<th>Amount</th>
<th>Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td class="amount">100</td>
<td class="running-balance"></td>
</tr>
<tr>
<td>b</td>
<td class="amount">150</td>
<td class="running-balance"></td>
</tr>
<tr>
<td>c</td>
<td class="amount">125</td>
<td class="running-balance"></td>
</tr>
<tr>
<td>d</td>
<td class="amount">205</td>
<td class="running-balance"></td>
</tr>
<tr>
<td>e</td>
<td class="amount">50</td>
<td class="running-balance"></td>
</tr>
</tbody>
</table>

Extracting table column values from html table using javascript

Only started using javascript 2 weeks ago so I only have a limited understanding.
I have some javascript code that generates a html table from excel documents and i need to extract the values from part of one column and place those values into an array. Which i later will use to generate a line graph. The code mainly needs to work on IE11.
Truncated example table below.
<tbody>
// several other rows here
<tr>
<td id="sjs-A16">column head A</td>
<td id="sjs-B16">column head B</td>
<td id="sjs-C16">column head C</td>
<td id="sjs-D16">column head D</td>
<td id="sjs-E16">column head E</td>
<td id="sjs-F16">column head F</td>
<td id="sjs-G16">column head G</td>
<td id="sjs-H16">column head H</td>
</tr>
<tr>
<td id="sjs-A17">1A</td>
<td id="sjs-B17">1B</td>
<td id="sjs-C17">1C</td>
<td id="sjs-D17">1D</td>
<td id="sjs-E17">1E</td>
<td id="sjs-F17">1F</td>
<td id="sjs-G17">1G</td>
<td id="sjs-H17">1H</td>
</tr>
<tr>
<td id="sjs-A18">2A</td>
<td id="sjs-B18">2B</td>
<td id="sjs-C18">2C</td>
<td id="sjs-D18">2D</td>
<td id="sjs-E18">2E</td>
<td id="sjs-F18">2F</td>
<td id="sjs-G18">2G</td>
<td id="sjs-H18">2H</td>
</tr>
<tr>
<td id="sjs-A19">3A</td>
<td id="sjs-B19">3B</td>
<td id="sjs-C19">3C</td>
<td id="sjs-D19">3D</td>
<td id="sjs-E19">3E</td>
<td id="sjs-F19">3F</td>
<td id="sjs-G19">3G</td>
<td id="sjs-H19">3H</td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
//several more empty rows here
</tbody>
I need the value of all cells with ids in the E(xx) but only id sjs-E17 and greater (sjs-Exx where xx >= 17), so value 1E-3E+ but no cell above that one (so not sjs-E16 to sjs-E1).
The number of rows i varies but the needed values always start on row 17. And as seen the scrip generates several empty rows after the values stop, but none of them have any id.
Expected results is just an array (or function) containing the values from cell E17+
var test_array = ["1E", "2E", "3E", ...];

Using jQuery, you can do this:
var td = $('[id^="sjs-E"]'),
valArray = [];
td.each(function() {
var id = $(this).attr('id'),
idVal = +id.substring(5); //parse value after `E` to number using (+)
//check if idVal is number
if (!isNaN(idVal)) {
if (idVal >= 17) {
valArray.push($(this).html());
}
}
});
console.log(valArray);
.header {
background-color: grey;
font-size: 15px;
}
td {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="header">
<td id="sjs-A16">column head A</td>
<td id="sjs-B16">column head B</td>
<td id="sjs-C16">column head C</td>
<td id="sjs-D16">column head D</td>
<td id="sjs-E16">column head E</td>
<td id="sjs-F16">column head F</td>
<td id="sjs-G16">column head G</td>
<td id="sjs-H16">column head H</td>
</tr>
<tr>
<td id="sjs-A17">1A</td>
<td id="sjs-B17">1B</td>
<td id="sjs-C17">1C</td>
<td id="sjs-D17">1D</td>
<td id="sjs-E17">1E</td>
<td id="sjs-F17">1F</td>
<td id="sjs-G17">1G</td>
<td id="sjs-H17">1H</td>
</tr>
<tr>
<td id="sjs-A18">2A</td>
<td id="sjs-B18">2B</td>
<td id="sjs-C18">2C</td>
<td id="sjs-D18">2D</td>
<td id="sjs-E18">2E</td>
<td id="sjs-F18">2F</td>
<td id="sjs-G18">2G</td>
<td id="sjs-H18">2H</td>
</tr>
<tr>
<td id="sjs-A19">3A</td>
<td id="sjs-B19">3B</td>
<td id="sjs-C19">3C</td>
<td id="sjs-D19">3D</td>
<td id="sjs-E19">3E</td>
<td id="sjs-F19">3F</td>
<td id="sjs-G19">3G</td>
<td id="sjs-H19">3H</td>
</tr>
<!-- several empty rows -->
</tbody>
</table>
Or, using vanilla javascript:
var tdRE = /^sjs-E([2-9]\d|1[7-9]|[1-9]{3,})$/,
els = document.getElementsByTagName('*'),
valArray = [];
for (var i = 0; i < els.length; i++) {
var match = tdRE.exec(els[i].id);
if (match) {
if ((+match[1]) >= 17) { //the (+) operator again, convert string to number and check if >= 17
valArray.push(els[i].innerHTML);
}
}
}
console.log(valArray);
.header {
background-color: grey;
font-size: 15px;
}
td {
text-align: center;
}
<table>
<tbody>
<tr class="header">
<td id="sjs-A16">column head A</td>
<td id="sjs-B16">column head B</td>
<td id="sjs-C16">column head C</td>
<td id="sjs-D16">column head D</td>
<td id="sjs-E16">column head E</td>
<td id="sjs-F16">column head F</td>
<td id="sjs-G16">column head G</td>
<td id="sjs-H16">column head H</td>
</tr>
<tr>
<td id="sjs-A17">1A</td>
<td id="sjs-B17">1B</td>
<td id="sjs-C17">1C</td>
<td id="sjs-D17">1D</td>
<td id="sjs-E17">1E</td>
<td id="sjs-F17">1F</td>
<td id="sjs-G17">1G</td>
<td id="sjs-H17">1H</td>
</tr>
<tr>
<td id="sjs-A18">2A</td>
<td id="sjs-B18">2B</td>
<td id="sjs-C18">2C</td>
<td id="sjs-D18">2D</td>
<td id="sjs-E18">2E</td>
<td id="sjs-F18">2F</td>
<td id="sjs-G18">2G</td>
<td id="sjs-H18">2H</td>
</tr>
<tr>
<td id="sjs-A19">3A</td>
<td id="sjs-B19">3B</td>
<td id="sjs-C19">3C</td>
<td id="sjs-D19">3D</td>
<td id="sjs-E19">3E</td>
<td id="sjs-F19">3F</td>
<td id="sjs-G19">3G</td>
<td id="sjs-H19">3H</td>
</tr>
<!-- several empty rows -->
</tbody>
</table>
Regex explanation:
^sjs-E([2-9]\d|[1-9][7-9]|\d{3,})$
^ - asserts beginning of string
() - catching group
| - logical OR
$ - end of string
^sjs-E - starts with sjs-E
[2-9]\d - matches between 20 - 99
OR
1[7-9] - matches 17 - 19
OR
[1-9]{3,} - matches 100 and above

let result = [];
$('table tr td[id^="sjs-E"]').each(function(){
let ele = $(this);
//extracting last two digits of id
let digits = ele.attr('id').slice(-2);
if(!isNaN(digits) && digits >= 17){
result.push(ele.html());
}
});
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td id="sjs-A16">column head A</td>
<td id="sjs-B16">column head B</td>
<td id="sjs-C16">column head C</td>
<td id="sjs-D16">column head D</td>
<td id="sjs-E16">column head E</td>
<td id="sjs-F16">column head F</td>
<td id="sjs-G16">column head G</td>
<td id="sjs-H16">column head H</td>
</tr>
<tr>
<td id="sjs-A17">1A</td>
<td id="sjs-B17">1B</td>
<td id="sjs-C17">1C</td>
<td id="sjs-D17">1D</td>
<td id="sjs-E17">1E</td>
<td id="sjs-F17">1F</td>
<td id="sjs-G17">1G</td>
<td id="sjs-H17">1H</td>
</tr>
<tr>
<td id="sjs-A18">2A</td>
<td id="sjs-B18">2B</td>
<td id="sjs-C18">2C</td>
<td id="sjs-D18">2D</td>
<td id="sjs-E18">2E</td>
<td id="sjs-F18">2F</td>
<td id="sjs-G18">2G</td>
<td id="sjs-H18">2H</td>
</tr>
<tr>
<td id="sjs-A19">3A</td>
<td id="sjs-B19">3B</td>
<td id="sjs-C19">3C</td>
<td id="sjs-D19">3D</td>
<td id="sjs-E19">3E</td>
<td id="sjs-F19">3F</td>
<td id="sjs-G19">3G</td>
<td id="sjs-H19">3H</td>
</tr>
</tbody>
</table>

var test_array = [];
var isGreaterThan = 17;
var until = 1000; // i don't know
for (var i=isGreaterThan; i < until; i++) {
var html = document.getElementById('sjs-E' + i.toString());
if (html) {
test_array.push(html.innerText);
}
}

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.

Copy contents of one field to another using jQuery

I have a table structure like:
<table id='myTable'>
<thead>
<tr>
<th class='name'>Name</th>
<th class='nick-name'>Nick Name</th>
<th class='age'>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td class='name'>Ilona</td>
<td class='nick-name'>Baby Doll</td>
<td class='age'>21</td>
</tr>
<tr>
<td class='name'>Sieraa</td>
<td class='nick-name'></td>
<td class='age'>24</td>
</tr>
<tr>
<td class='name'>Britney</td>
<td class='nick-name'>Blondie</td>
<td class='age'>27</td>
</tr>
<tr>
<td class='name'>Kate</td>
<td class='nick-name'>Night Queen</td>
<td class='age'>19</td>
</tr>
<tr>
<td class='name'>Dani</td>
<td class='nick-name'></td>
<td class='age'>23</td>
</tr>
<tr>
<td class='name'>Aliee</td>
<td class='nick-name'></td>
<td class='age'>26</td>
</tr>
<tr>
<td class='name'>Brandi</td>
<td class='nick-name'></td>
<td class='age'>27</td>
</tr>
</tbody>
</table>
As some Nick Name fields are empty, I want to display the value of Name in Nick Name if they are empty.
Eg: In Second Row of Table Body, The Nick Name field is empty, The Name field contains Sierra. So, I want to display Sierra in Nick Name field instead of leaving it empty.
How can I achieve this using jQuery or JavaScript

jQuery:
this only works when the .name is always the exact previous element of .nick-name like in your structure
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
$(this).text($(this).prev().text());
}
});
This works when both .name and .nick-name have the same parent
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
var name = $(this).parent().find('.name').text();
$(this).text(name);
}
});
You should read up on DOM Traversing with jQuery, there is lots of stuff you can do to get to your elements.
jsfiddle: http://jsfiddle.net/sX4yj/

This should help
$('#myTable tr').each(function(){
var nickname = $(this).find('.nick-name').html();
alert(nickname);
});
Refer: How to get a table cell value using jQuery?