Suppose I have a table of column product, rate this is the rows in it
<tr>
<td>pepsi</td>
<td>2</td>
</tr>
<tr>
<td>juice</td>
<td>4</td>
</tr>
I want total rate, example:
<tr>
<td>total</td>
<td>6</td>
</tr>
-
If it hard coded table? or you are getting values in response?Ajay Narain Mathur– Ajay Narain Mathur2016-09-23 05:16:50 +00:00Commented Sep 23, 2016 at 5:16
-
i want the values as responsepragya.go– pragya.go2016-09-26 09:23:13 +00:00Commented Sep 26, 2016 at 9:23
-
As the values come in response, I strongly suggest you to calculate the sum on the responce object itself and then display on HTML instead of displaying table and then calculating sum by picking values form HTML.Ajay Narain Mathur– Ajay Narain Mathur2016-09-27 00:29:29 +00:00Commented Sep 27, 2016 at 0:29
-
Post you response in question if you need any further help.Ajay Narain Mathur– Ajay Narain Mathur2016-09-27 00:29:55 +00:00Commented Sep 27, 2016 at 0:29
Add a comment
|
3 Answers
Get all last td of the table and get sum by iterating over them. Finally, generate the tr with the calculated sum.
// variable for storing the sum
var sum = 0;
// get all last td from tr
// convert node list to array
// for old browser use `[].slice.call` instead
Array.from(document.querySelectorAll('tr td:last-child'))
// iterate over the td elements
.forEach(function(e) {
// calculate the sum based on the content
sum += Number(e.textContent) || 0;
})
// create tr element
var tr = document.createElement('tr');
// add first cell for showing text
tr.insertCell(0).textContent = 'total';
// add second column for sowing the calculated sum
tr.insertCell(1).textContent = sum;
// get the table and append the generated tr element
document.querySelector('table tbody,table').appendChild(tr);<table>
<tr>
<td>pepsi</td>
<td>2</td>
</tr>
<tr>
<td>juice</td>
<td>4</td>
</tr>
</table>7 Comments
pragya.go
thanks!! thats what I wanted
Pranav C Balan
@peggy.go : glad to help
pragya.go
when a trying to add this to my code, it shows error in console "Cannot read property 'appendChild' of null". Do you know why?
Pranav C Balan
@peggy.go : try
document.querySelector('table tbody,table').innerHTMLpragya.go
I found my silly mistake. I was adding script tag in the header. stackoverflow.com/a/8670572/6622173 Thanks for your help!
|
You can get all the rows of table by table.rows and loop through that to get cells values like below
(function(){
var table = document.getElementById("mytab1");
var sum = 0;
for (var i = 0, row; row = table.rows[i]; i++) {
sum += parseInt(table.rows[i].cells[1].innerHTML)
// cells[1] is hardcoded (Assumed <td>2</td> will always the second cell your row)
}
var tr = document.createElement('tr');
tr.insertCell(0).textContent = 'total';
tr.insertCell(1).textContent = sum;
table.appendChild(tr);
})();<table id="mytab1">
<tr>
<td>pepsi</td>
<td>2</td>
</tr>
<tr>
<td>juice</td>
<td>4</td>
</tr>
</table>
Comments
You can use innerHTML
table = document.getElementById('id_of_your_table');
table.innerHTML = table.innerHTML + '<tr><td>total</td><td>6</td></tr>';
Comments
