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

HTML Table : addition of value from one column(each row) and 2nd column and dispaly it on third column

(Table will be fetched from database so it will be having N number of rows)
I could get the result on console using 'td:nth-child(7)' but I want in on change of 'td:nth-child(5)' or 'td:nth-child(6)'
Here i am getting console value but cant get it in column text
http://jsfiddle.net/adwaitrao/s78y031x/11/
$(".btn").click(function() {
var $row = $(this).parents('tr');
var text0 = $row.find('td:nth-child(5)').text();
var text1 = $row.find('td:nth-child(6)').text();
var str = $row.find('td:nth-child(7)').text();
var res = +text0 + +text1;
console.log(res);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<table width="100%" border="1">
<tr>
<td>Sr</td>
<td>Product name</td>
<td>Variants</td>
<td>Attributes</td>
<td>Price</td>
<td>Qty</td>
<td>Result </td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>Product1</td>
<td>department1</td>
<td>Colorred</td>
<td contenteditable>4</td>
<td contenteditable>720</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>
<tr>
<td>2</td>
<td>Product2</td>
<td>department2</td>
<td>Colorgreen</td>
<td contenteditable>6</td>
<td contenteditable>900</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>

You mean
function show() {
var $row = $(this).parents('tr');
var text0 = $row.find('td:nth-child(5)').text();
var text1 = $row.find('td:nth-child(6)').text();
var str = $row.find('td:nth-child(7)').text();
var res = +text0 + +text1;
console.log(res);
}
$(".btn").on("click",show);
$("[contenteditable]").on("input",show)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<table width="100%" border="1">
<tr>
<td>Sr</td>
<td>Product name</td>
<td>Variants</td>
<td>Attributes</td>
<td>Price</td>
<td>Qty</td>
<td>Result </td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>Product1</td>
<td>department1</td>
<td>Colorred</td>
<td contenteditable>4</td>
<td contenteditable>720</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>
<tr>
<td>2</td>
<td>Product2</td>
<td>department2</td>
<td>Colorgreen</td>
<td contenteditable>6</td>
<td contenteditable>900</td>
<td></td>
<td><button class="btn">ADD TRANSACTION</button></td>
</tr>

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>

JS loop through table and print text in column based on condition

I have a simple table, and I need to print a text in a certain column based on condition over hidden columns. There are multiple rows as a record which have same TD ID. What I need to do is, to go through each row of table and check status1 (gv-field-15-139), status2 (gv-field-15-140) and status3 (gv-field-15-141). If one of this status (gv-field-15-150) is 'Completed' I want to print Completed in Status column. is it possible?
$(document).ready(function(){
if(($('td#gv-field-15-139').text() == 'Completed') || ($('td#gv-field-15-
140').text() == 'Completed') || ($('td#gv-field-15-141').text() == 'Completed') ) {
$("td#gv-field-15-150").text('Completed');
}
<table>
<tr>
<th>Student Name</th>
<th>Nationality</th>
<th>Status</th>
<th>Status1</th>
<th>Status2</th>
<th>Status3</th>
</tr>
<tr>
<td id="gv-field-15-1">Student A</td>
<td id="gv-field-15-90">India</td>
<td id="gv-field-15-150"> </td>
<td id="gv-field-15-139">Completed</td>
<td id="gv-field-15-140">Pending</td>
<td id="gv-field-15-141">Pending</td>
</tr>
<tr>
<td id="gv-field-15-1">Student B</td>
<td id="gv-field-15-90">China</td>
<td id="gv-field-15-150"> </td>
<td id="gv-field-15-139">Completed</td>
<td id="gv-field-15-140">Pending</td>
<td id="gv-field-15-141">Pending</td>
</tr>
</table>
This only works for 1 row and when it becomes 2 row or more it doesn't work. Could you please show me a way to achieve this.

Loop your tr except the first tr which has th and check td. Though you can achieve the solution to your problem with ids, its recommended to use class instead of ids.
$(document).ready(function() {
var trs = $('tr').not(':eq(0)');
$.each(trs, function() {
var $this = $(this);
if (($this.find('>td#gv-field-15-139').text() == 'Completed') || ($this.find('>td#gv-field-15-140').text() == 'Completed') || ($this.find('>td#gv-field-15-141').text() == 'Completed')) {
$this.find(">td#gv-field-15-150").text('Completed');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Student Name</th>
<th>Nationality</th>
<th>Status</th>
<th>Status1</th>
<th>Status2</th>
<th>Status3</th>
</tr>
<tr>
<td id="gv-field-15-1">Student A</td>
<td id="gv-field-15-90">India</td>
<td id="gv-field-15-150"> </td>
<td id="gv-field-15-139">Completed</td>
<td id="gv-field-15-140">Pending</td>
<td id="gv-field-15-141">Pending</td>
</tr>
<tr>
<td id="gv-field-15-1">Student B</td>
<td id="gv-field-15-90">China</td>
<td id="gv-field-15-150"> </td>
<td id="gv-field-15-139">Completed</td>
<td id="gv-field-15-140">Pending</td>
<td id="gv-field-15-141">Pending</td>
</tr>
<tr>
<td id="gv-field-15-1">Student B</td>
<td id="gv-field-15-90">China</td>
<td id="gv-field-15-150"> </td>
<td id="gv-field-15-139">Pending</td>
<td id="gv-field-15-140">Pending</td>
<td id="gv-field-15-141">Pending</td>
</tr>
</table>

Do not use duplicate id's, you can use the index of the cells intead:
const table = document.querySelector('table');
//take all rows except the header
const rows = Array.from(table.querySelectorAll('tr')).slice(
1,
);
rows.forEach((row) => {
const cells = Array.from(
row.querySelectorAll('td')
);
//get the 3rd cell
const [, , toSet] = cells;
//all values after 3rd cell
const [, , ,...values] = cells.map(
(cell) => cell.innerText.trim()//map to the innerText of the cell
);
if(values.includes('Completed')){
toSet.innerHTML = 'Completed'
}
});
<table>
<tr>
<th>Student Name</th>
<th>Nationality</th>
<th>Status</th>
<th>Status1</th>
<th>Status2</th>
<th>Status3</th>
</tr>
<tr>
<td>Student A</td>
<td>India</td>
<td>xxx</td>
<td>Completed</td>
<td>Pending</td>
<td>Pending</td>
</tr>
<tr>
<td>Student B</td>
<td>China</td>
<td>xxx</td>
<td>Completed</td>
<td>Pending</td>
<td>Pending</td>
</tr>
<tr>
<td>Student C</td>
<td>Not Completed</td>
<td>xxx</td>
<td>Pending</td>
<td>Pending</td>
<td>Pending</td>
</tr>
</table>

This solution is so simplistic it doesn't even have a need for jQuery, I also thought that it might be nicer to read if you broke the logic up a bit, i.e. rather than having an ugly & long looking if statement, I've implemented the isComplete function.
FYI. ID's are meant to be unique throughout the entire page, it may be a better idea to change them to classes if you can.
Edit
After having looked at the beautiful solution produced by #HMR I thought I'd include some of the elegant code that was implemented into this solution, I can't take all the credit there!
// Just short hand.
const $e = queryString => document.querySelectorAll(queryString);
const term = 'Completed';
// Returns a boolean.
const isComplete = td => td.textContent.replace(/\ /, '') === term;
// Some fallback function.
const fallback = () => console.log('Next...');
// Render the update(s).
const render = (v, t) => v.includes(true) ? t.textContent = term : fallback();
// Updates the relevant td tags.
const update = tr => {
const tds = Array.from(tr.querySelectorAll('td'));
const [, , , ...values] = tds.map(td => isComplete(td));
const [, , td] = tds;
render(values, td);
};
// Iterate over the relevant tr tags.
const loop = () => Array.from($e("table tr")).splice(1, ).forEach(tr => update(tr));
// Start the process.
loop();
<table>
<tr>
<th>Student Name</th>
<th>Nationality</th>
<th>Status</th>
<th>Status1</th>
<th>Status2</th>
<th>Status3</th>
</tr>
<tr>
<td id="gv-field-15-1">Student A</td>
<td id="gv-field-15-90">India</td>
<td id="gv-field-15-150"> </td>
<td id="gv-field-15-139">Completed</td>
<td id="gv-field-15-140">Pending</td>
<td id="gv-field-15-141">Pending</td>
</tr>
<tr>
<td id="gv-field-15-1">Student B</td>
<td id="gv-field-15-90">China</td>
<td id="gv-field-15-150"> </td>
<td id="gv-field-15-139">Completed</td>
<td id="gv-field-15-140">Pending</td>
<td id="gv-field-15-141">Pending</td>
</tr>
<tr>
<td id="gv-field-15-1">Student C</td>
<td id="gv-field-15-90">China</td>
<td id="gv-field-15-150"> </td>
<td id="gv-field-15-139">Pending</td>
<td id="gv-field-15-140">Pending</td>
<td id="gv-field-15-141">Pending</td>
</tr>
</table>

There are couple of issues:
You have duplicate IDs. ID must be unique. In your current code, you will always get first element with necessary ID. So you should use classes instead
You are not looping. Since its a table and you have to handle each row, you have to loop over all rows and based on current row, you have to check/update necessary column's value.
$(document).ready(function() {
var $tr = $('table tr');
$.each($tr, function(index, tr) {
if (
($('.gv-field-15-139', tr).text() == 'Completed') ||
($('.gv-field-15- 140', tr).text() == 'Completed') ||
($('.gv-field-15-141', tr).text() == 'Completed')
) {
$(".gv-field-15-150", tr).text('Completed');
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table>
<tr>
<th>Student Name</th>
<th>Nationality</th>
<th>Status</th>
<th>Status1</th>
<th>Status2</th>
<th>Status3</th>
</tr>
<tr>
<td class="gv-field-15-1">Student A</td>
<td class="gv-field-15-90">India</td>
<td class="gv-field-15-150"> </td>
<td class="gv-field-15-139">Completed</td>
<td class="gv-field-15-140">Pending</td>
<td class="gv-field-15-141">Pending</td>
</tr>
<tr>
<td class="gv-field-15-1">Student B</td>
<td class="gv-field-15-90">China</td>
<td class="gv-field-15-150"> </td>
<td class="gv-field-15-139">Pending</td>
<td class="gv-field-15-140">Pending</td>
<td class="gv-field-15-141">Pending</td>
</tr>
</table>

Loop through all the rows in the table except the first row(and hence => $('tr').length-1).
.eq() function is used to access each element/text by index..
$(document).ready(function () {
for(i=0;i<$('tr').length-1;i++){
if( ($('td#gv-field-15-139').eq(i).text() == 'Completed') || ($('td#gv-field-15-140').eq(i).text() == 'Completed') || ($('td#gv - field - 15 - 141').eq(i).text() == 'Completed') ) {
$("td#gv-field-15-150").eq(i).text('Completed');
}
}
});

#IDs Must Always be Unique
Having duplicated #ids makes HTML invalid, more importantly it cripples JS/jQ because it is expected that #ids are unique so once found, no efforts are made to continue for second occurrence of an #id.
Changes
All #ids have been changed to .classes
The last 3 <td> of each row have a shared class: .status
The 3rd <td> of each row has a new class: .primary
Reference
.each()
.prevAll()
Demo
Three lines of code...that's all you need.
$('.status').each(function() {
if ($(this).text() === 'Completed') {
$(this).prevAll('.primary').text('Completed');
}
});
<table>
<tr>
<th>Student Name</th>
<th>Nationality</th>
<th>Status</th>
<th>Status1</th>
<th>Status2</th>
<th>Status3</th>
</tr>
<tr>
<td class="gv-field-15-1">Student A</td>
<td class="gv-field-15-90">India</td>
<td class="gv-field-15-150 primary"> </td>
<td class="gv-field-15-139 status">Completed</td>
<td class="gv-field-15-140 status">Pending</td>
<td class="gv-field-15-141 status">Pending</td>
</tr>
<tr>
<td class="gv-field-15-1">Student B</td>
<td class="gv-field-15-90">China</td>
<td class="gv-field-15-150 primary"> </td>
<td class="gv-field-15-139 status">Completed</td>
<td class="gv-field-15-140 status">Pending</td>
<td class="gv-field-15-141 status">Pending</td>
</tr>
<tr>
<td class="gv-field-15-1">Student C</td>
<td class="gv-field-15-90">USA</td>
<td class="gv-field-15-150 primary"> </td>
<td class="gv-field-15-139 status">ERROR</td>
<td class="gv-field-15-140 status">Pending</td>
<td class="gv-field-15-141 status">Pending</td>
</tr>
<tr>
<td class="gv-field-15-1">Student D</td>
<td class="gv-field-15-90">France</td>
<td class="gv-field-15-150 primary"> </td>
<td class="gv-field-15-139 status">Pending</td>
<td class="gv-field-15-140 status">Pending</td>
<td class="gv-field-15-141 status">Completed</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML table with rowspan reorder item drag and drop issue

my html code is
<table border='1px' id='sort'>
<thead>
<tr>
<th>SL</th>
<th>Sub Group</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan='3'>1</td>
<td rowspan='3'>Fruit</td>
<td>Mango</td>
</tr>
<tr>
<td>Orange</td>
</tr>
<tr>
<td>pineapple</td>
</tr>
<tr>
<td rowspan='2'>2</td>
<td rowspan='2'>Flower</td>
<td>Rose</td>
</tr>
<tr>
<td>sunflower</td>
</tr>
</tbody>
</table>
and js
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
return $helper;
},
updateIndex = function(e, ui) {
$('td.index', ui.item.parent()).each(function (i) {
$(this).html(i + 1);
});
};
$("#sort tbody").sortable({
helper: fixHelperModified,
stop: updateIndex
}).disableSelection();
I want to reorder only subgroup like fruit mango,orange or sunflower,rose not the main group in the table.
The working fiddle is http://jsfiddle.net/p6c814o6/. How to solve this issue. Thank you.

Try this:
I have updated your fiddle JsFiddle. Your html was wrong according to your code. You must check your new html.
Instead Of using rowspans you must go with nested tables to achieve it.
<table border='1px' id='sort'>
<thead>
<tr>
<th>SL</th>
<th>Sub Group</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td >1</td>
<td >Fruit</td>
<td><table>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Orange</td>
</tr>
<tr>
<td>pineapple</td>
</tr></td>
</tr>
</table>
<tr>
<td >2</td>
<td >Flower</td>
<td><table>
<tr>
<td>
Rose
</td>
</tr>
<tr>
<td>sunflower</td>
</tr>
</table>
</td>
</tbody>
</table>
Check out the updated fiddle. If this is what you need.
Hope this helps JsFiddleUpdated