Sum column values in table

Sum column values in table - javascript

I am trying to sum the values of the "Total Work Assigned" and "Not Called" columns.
Here is my table HTML
<table border=1 id="category">
<tr>
<th>User Name</th>
<th>User Belongs</th>
<th>Total Work Assigned</th>
<th>Not Called</th>
</tr>
<tr>
<td>vidyaranyapura</td>
<td>Category</td>
<td>172</td>
<td>156</td>
</tr>
<tr>
<td>sahasra</td>
<td>Company</td>
<td>500</td>
<td>350</td>
</tr>
<tr>
<td>global</td>
<td>Not Assigned</td>
<td>0</td>
<td>0</td>
</tr>
</table>
here is snippet
$('#category tr td').text(function(i,el){
console.log(parseInt(el,10));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1 id="category">
<tr>
<th>User Name</th>
<th>User Belongs</th>
<th>Total Work Assigned</th>
<th>Not Called</th>
</tr>
<tr>
<td>vidyaranyapura</td>
<td>Category</td>
<td>172</td>
<td>156</td>
</tr>
<tr>
<td>sahasra</td>
<td>Company</td>
<td>500</td>
<td>350</td>
</tr>
<tr>
<td>global</td>
<td>Not Assigned</td>
<td>0</td>
<td>0</td>
</tr>
</table>
<h3>MY EXPECTED OUTPUT</h3>
<table border=1 id="same_id_wont_work_changed_for_demo_only">
<tr>
<th>User Name</th>
<th>User Belongs</th>
<th>Total Work Assigned</th>
<th>Not Called</th>
</tr>
<tr>
<td>vidyaranyapura</td>
<td>Category</td>
<td>172</td>
<td>156</td>
</tr>
<tr>
<td>sahasra</td>
<td>Company</td>
<td>500</td>
<td>350</td>
</tr>
<tr>
<td>global</td>
<td>Not Assigned</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td>672</td>
<td>506</td>
</tr>
</table>
jsfiddle for my expected output: https://jsfiddle.net/2g29c8uv/16/

I guess what you want to do is something like this:
DEMO: https://jsfiddle.net/zxooa1j4/1/
var sum1 = 0;
var sum2 = 0;
$("#category tr").not(':first').not(':last').each(function() {
sum1 += getnum($(this).find("td:eq(2)").text());
sum2 += getnum($(this).find("td:eq(3)").text());
function getnum(t){
if(isNumeric(t)){
return parseInt(t,10);
}
return 0;
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
}
});
$("#sum1").text(sum1);
$("#sum2").text(sum2);
isNumeric() function is quoted from this answer:
Is there any function like IsNumeric in javascript to validate numbers
HTML:
<table border=1 id="category">
<tr>
<th>User Name</th>
<th>User Belongs</th>
<th>Total Work Assigned</th>
<th>Not Called</th>
</tr>
<tr>
<td>vidyaranyapura</td>
<td>Category</td>
<td>172</td>
<td>156</td>
</tr>
<tr>
<td>sahasra</td>
<td>Company</td>
<td>500</td>
<td>350</td>
</tr>
<tr>
<td>global</td>
<td>Not Assigned</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td id="sum1"></td>
<td id="sum2"></td>
</tr>
</table>
Hope this helps.

Based on the PHP that you provided in your fiddle. You can actually total the values while you're looping through them for output to the display.
Simply replace this foreach section
$table2 = '<table id="all_category_data" class="table table-striped table-bordered table-hover"><tr><th>User Name</th><th>User Belongs to</th><th>Total Work Assigned</th><th>Not Called</th><th>Follow Up</th><th>Intrested</th><th>Not Intrested</th></tr>';
foreach($totalresult as $totalresults) {
$table2 .= "<tr><td>".$totalresults['username'].
"</td><td>".$totalresults['userbelongs'].
"</td><td>".$totalresults['totalvalue'].
"</td><td>".$totalresults['Notcalled'].
"</td><td>".$totalresults['followUp'].
"</td><td>".$totalresults['intrested'].
"</td><td>".$totalresults['notIntrested'].
"</td></tr>";
}
$table2. = '</table>';
echo $table2;
with the following that includes the addition and output
$table2 = '<table id="all_category_data" class="table table-striped table-bordered table-hover"><tr><th>User Name</th><th>User Belongs to</th><th>Total Work Assigned</th><th>Not Called</th><th>Follow Up</th><th>Intrested</th><th>Not Intrested</th></tr>';
$totalValue = 0;
$notCalledValue = 0;
foreach($totalresult as $totalresults) {
// addition of totalValue
$totalValue = $totalValue + $totalresults['totalvalue'];
// addition of notCalledValue
$notCalledValue = $notCalledValue + $totalresults['Notcalled'];
$table2 .= "<tr><td>".$totalresults['username'].
"</td><td>".$totalresults['userbelongs'].
"</td><td>".$totalresults['totalvalue'].
"</td><td>".$totalresults['Notcalled'].
"</td><td>".$totalresults['followUp'].
"</td><td>".$totalresults['intrested'].
"</td><td>".$totalresults['notIntrested'].
"</td></tr>";
}
// output of totalValue and notCalledValue
$table2 .= "<tr><td>".
"</td><td>".
"</td><td>".$totalValue.
"</td><td>".$notCalledValue.
"</td><td>".
"</td><td>".
"</td><td>".
"</td></tr>";
$table2. = '</table>';
echo $table2;
NOTE: this assumes that the $totalresults['totalvalue'] and $totalresults['Notcalled'] keys in your data are numbers.

Related

get the column header on cell click

I want to get the column header of the table on cell click.I have tried as below.Now all the th value is displaying.now to get the relavent th value.
$('td').click(function() {
var txt = $(this).text();
var label=$(this).closest('tr').find('.label').text();
var header=$(this).closest('table').find('th').text();
console.log(txt + ':' +label + ':'+header);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead id="thead">
<th></th>
<th>Week 1 </th>
<th>Week 2 </th>
<th>Week 3 </th>
<th>Week 4 </th></thead>
<tbody id="tbody"><tr><td class="label">test1</td><td>5</td><td>2</td><td>7</td><td>1</td></tr><tr><td class="label">test2</td><td>9</td><td>15</td><td>12</td><td>4</td></tr><tr><td class="label">test3</td><td>32</td><td>12</td><td>23</td><td>28</td></tr><tr><td class="label">test4</td><td>1</td><td>0</td><td>0</td><td>0</td></tr></tbody>
<tbody id="tfooter"><tr><td>Total</td><td>145</td><td>120</td><td>157</td><td>162</td></tr></tbody>
</table>

To make this work you need to get the th which matches the index of the clicked td in the row. To do that use index() and eq(), like this:
$('td').click(function() {
let $cell = $(this);
let txt = $cell.text();
let label = $cell.closest('tr').find('.label').text();
let header = $cell.closest('table').find('th').eq($cell.index()).text();
console.log(txt + ':' + label + ':' + header);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead id="thead">
<th></th>
<th>Week 1 </th>
<th>Week 2 </th>
<th>Week 3 </th>
<th>Week 4 </th>
</thead>
<tbody id="tbody">
<tr>
<td class="label">test1</td>
<td>5</td>
<td>2</td>
<td>7</td>
<td>1</td>
</tr>
<tr>
<td class="label">test2</td>
<td>9</td>
<td>15</td>
<td>12</td>
<td>4</td>
</tr>
<tr>
<td class="label">test3</td>
<td>32</td>
<td>12</td>
<td>23</td>
<td>28</td>
</tr>
<tr>
<td class="label">test4</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
<tbody id="tfooter">
<tr>
<td>Total</td>
<td>145</td>
<td>120</td>
<td>157</td>
<td>162</td>
</tr>
</tbody>
</table>

How to view multiple tables through dropdown menu?

How can I have 2 or more tables on 1 page with only viewing 1 table at the time with dropdown menu you choose which table to show without a button or refreshing the page? Does anyone have an idea? Atleast we need to use ajax/js. I use datatables plugin for my tables. Here is a Fiddle
<select>
<option value='table1'>table1</option>
<option value='table2'>table2</option>
</select>

You can use jquery hide/show method to do the same.
Please take a look at the fiddle
Below code handles showing/hiding of tables
$(function() {
$('#table1').wrap('<div id="hidetable1" class="hide" style="display:none"/>');
$('#table2').wrap('<div id="hidetable2" class="hide" style="display:none"/>');
$('#table3').wrap('<div id="hidetable3" class="hide" style="display:none"/>');
$('#table1').DataTable( {
"searching": true
} );
$('#table2').DataTable( {
"searching": true
} );
$('#table3').DataTable( {
"searching": true
} );
console.log($("#drop"))
$("#hide"+ $("#drop")[0].value).show();
$("#drop").change(function () {
var end = this.value;
$('.hide').hide();
$("#hide"+end).show();
});
});

You can do it by making an onchange function, giving ids to the table and displaying table according to the value like this
function display(val){
document.getElementById(val).style.display = "block";
val== "table1"?document.getElementById("table2").style.display = "none":document.getElementById("table1").style.display = "none";;
}
#table2{
display:none;
}
<select onchange = "display(this.value)">
<option value='table1' selected>table1</option>
<option value='table2'>table2</option>
</select>
<table border='1' id="table1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table2">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
If you have more than two tables, you can simply do it by adding a class
function display(val){
var el = document.getElementsByClassName("allTables");
for(i=0; i<el.length; i++) {
el[i].style.display = "none";
}
document.getElementById(val).style.display = "block";
}
.allTables{
display:none;
}
#table1{
display:block;
}
<select onchange = "display(this.value)">
<option value='table1' selected>table1</option>
<option value='table2'>table2</option>
<option value='table3'>table3</option>
</select>
<table border='1' id="table1" class="allTables">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table2" class="allTables">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table3" class="allTables">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>

Initially set any one table which you want to display and make all the others hide. Then pass the selected table id to the onchange propery then hide all the other tables. To get all the tables which we want to hide, group it under a class name.
function show(){
var selectedTable= document.getElementById("drp").value;
var elements = document.getElementsByClassName('tableClass')
for (var i = 0; i < elements.length; i++){
if(elements[i].id==selectedTable)
elements[i].style.display = '';
else
elements[i].style.display = 'none';
}
}
<select onchange="show(value)" id="drp">
<option value='table1'>table1</option>
<option value='table2'>table2</option>
</select>
</br></br>
<table border='1' id="table1" class="tableClass">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table2" class="tableClass" style="display:none;">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>

Get the running balance of several tables with JQuery

I have several tables with the same structure. It has different values for the price. I want to get the running balance of the price column. So I want to get the sum and print each iteration in the running balance column. For example. In the Price column I have 400, 425 and 350 so in the running balance column, I should have 400, 825, 1175. Currently, I'm only getting the sum.
Here is my html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bacon</td>
<td class="price">1300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Pancakes</td>
<td class="price">300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fries</td>
<td class="price">400</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Nuggets</td>
<td class="price">425</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Ice Cream</td>
<td class="price">350</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
here is my javascript
$('.runningBal').each(function() {
var sum = 0;
$(this).parents('table').find('.price').each(function() {
var floted = parseFloat($(this).text());
if (!isNaN(floted)) sum += floted;
$('.runningBal').html(sum);
})
//$(this).html(sum);
});
Here is the fiddle

Well people in the comments are right to say that if the product prices are constant, you should render it server-side while you loop.
Anyway, this will do the job :
$("table").each(function() {
var sum = 0;
$(this).find(".runningBal").each(function() {
sum += +$(this).prev(".price").text();
$(this).text(sum);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bacon</td>
<td class="price">1300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Pancakes</td>
<td class="price">300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fries</td>
<td class="price">400</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Nuggets</td>
<td class="price">425</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Ice Cream</td>
<td class="price">350</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>

Change background of entire table row

I'm looking to make the entire row of a table change colour (either the background colour or text colour) based on the value of the column labelled "Status". If the value in the "Status" column is "Expired" the background of the entire row should change.
(Edit: The data is going to be pulled dynamically from a database).
Any suggestions?
HTML Code
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>
Thanks in advance.

If you can change how the table is rendered than I would just add the text as a class. This will be the best performance option and requires no JavaScript and the content will not flash.
tr.Expired td {
background-color: red;
}
tr.Active td {
background-color: green;
}
<table>
<thead>
<tr>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="Active">
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr class="Expired">
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</tbody>
</table>
Or you will need to run JavaScript code that reads the cell value and adds the class.
$("tr:has(td:last:contains('Expired'))").addClass("Expired");
tr.Expired td {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</tbody>
</table>

try using CSS only adding a class to the tr.
tr.active > td {
background-color: green;
}
tr.expired > td {
background-color: red;
}
https://jsfiddle.net/jt717mL8/

In your case the status column is the 5th. So you may do something like:
$('table tr:gt(0)').each(function(idx, ele) {
if ($(ele).find('td:eq(4)').text() == 'Expired') {
$(ele).css('backgroundColor', 'yellow');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>

You can first get index of status th and then check each td with same index and check its text.
var i = $('th:contains(Status)').index();
$('tr').each(function() {
var td = $(this).find('td').eq(i);
if (td.text() == 'Expired') td.css('background', 'red')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>

jsPDF - Header table with rowspan and colspan attributes

Based in this example I need to export the respective table but for some reason the pdf file generated doesn't recognize the rowspan and colspan attributes and the generated table looks different.
HTML view
<table id="table" border="1">
<thead>
<tr>
<th rowspan="2">ID</th>
<th colspan="2">Names</th>
<th rowspan="2">Email</th>
<th colspan="2">Addresses</th>
</tr>
<tr>
<th>First name</th>
<th>Last name</th>
<th>IP-address1</th>
<th>IP-address2</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right">1</td>
<td>Donna</td>
<td>Moore</td>
<td>dmoore0#furl.net</td>
<td>211.56.242.221</td>
<td>211.56.242.221</td>
</tr>
<tr>
<td align="right">2</td>
<td>Janice </td>
<td>Henry</td>
<td>jhenry1#theatlantic.com</td>
<td>38.36.7.199</td>
<td>38.36.7.199</td>
</tr>
<tr>
<td align="right">3</td>
<td>Ruth</td>
<td>Wells</td>
<td>rwells2#constantcontact.com</td>
<td>19.162.133.184</td>
<td>19.162.133.184</td>
</tr>
<tr>
<td align="right">4</td>
<td>Jason</td>
<td>Ray</td>
<td>jray3#psu.edu</td>
<td>10.68.11.42</td>
<td>10.68.11.42</td>
</tr>
<tr>
<td align="right">5</td>
<td>Jane</td>
<td>Stephens</td>
<td>jstephens4#go.com</td>
<td>47.32.129.71</td>
<td>47.32.129.71</td>
</tr>
<tr>
<td align="right">6</td>
<td>Adam</td>
<td>Nichols</td>
<td>anichols5#com.com</td>
<td>18.186.38.37</td>
<td>18.186.38.37</td>
</tr>
<tr>
<td align="right">6</td>
<td>Adam</td>
<td>Nichols</td>
<td>anichols5#com.com</td>
<td>18.186.38.37</td>
<td>18.186.38.37</td>
</tr>
<tr>
<td align="right">6</td>
<td>Adam</td>
<td>Nichols</td>
<td>anichols5#com.com</td>
<td>18.186.38.37</td>
<td>18.186.38.37</td>
</tr>
</tbody>
Script
function createPDF(){
var doc = new jsPDF('p', 'pt', 'letter');
var IDtable = document.getElementById('table');
var tableSource = doc.autoTableHtmlToJson(IDtable);
doc.autoTable(tableSource.columns, tableSource.data, {startY: doc.autoTableEndPosY() + 40, theme: 'grid'});
doc.save("file.pdf")
}

In the latest version rowspans and colspans are automatically handled so this should be enough.
var doc = new jsPDF();
doc.autoTable({html: '#table'});
doc.save("file.pdf")

We Keep Coding

JavaScript is the programming language of the Web.

Sum column values in table - javascript

Related

get the column header on cell click

How to view multiple tables through dropdown menu?

Get the running balance of several tables with JQuery

Change background of entire table row

jsPDF - Header table with rowspan and colspan attributes

Categories

Resources