Sum column values in table

Question

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/

If you're trying to total the 3rd and 4th columns, why are you doing it after the template has rendered? why not total them as its being generated? what templating library are you using, and how are you outputting your table? — haxxxton, Jan 20 '17 at 05:51
@haxxxton, i'm using `php` and `data is obtained` from `mysql database` — , Jan 20 '17 at 05:53
can you post your `php` code you're using to output the table please — haxxxton, Jan 20 '17 at 05:53
@haxxxton, by the way i'm using this query which is posted by me only http://stackoverflow.com/questions/41712550/how-to-get-the-count-and-name-of-each-element/41712614#41712614 — , Jan 20 '17 at 05:56
@user5405873, i dont need the `mysql`, im asking for the code you're using to output the `table`. It probably involves a number of `'; ?>` looking lines. — haxxxton, Jan 20 '17 at 06:01
as @haxxxton said. Doing it in the templating phase would be easier and faster. — ibrahim mahrir, Jan 20 '17 at 06:01
I have modified your JSfiddle code now it's working :[jsfiddle.net/2g29c8uv/19/](https://jsfiddle.net/2g29c8uv/19/) — Zeeshan Mahboob, Jan 20 '17 at 06:14
@ZeeshanMahboob, hit that _tidy_ button and alert the correct variable for `total work assigned` : https://jsfiddle.net/2g29c8uv/22/ — haxxxton, Jan 20 '17 at 06:18
@ZeeshanMahboob, post your Answer so that i can respect your answer — , Jan 20 '17 at 06:19
@user5405873, happy to post a `PHP` solution so that you have the correct rendered output if you can post your code — haxxxton, Jan 20 '17 at 06:21
@haxxxton, ok i'm posting my `php code` i'm using custom `ms sql to mysql query` here is my code https://jsfiddle.net/c86jLfa9/1/ — , Jan 20 '17 at 06:25

score 2 · Accepted Answer · edited May 23 '17 at 10:29

2

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.

edited May 23 '17 at 10:29

Community

1
1

answered Jan 20 '17 at 06:28

naota

4,695
1
18
21

I know this isnt Golf, but could this be more efficient by doing the `parseInt(t,10)` and THEN checking if `!isNaN && isFinite` before returning either it or `0`. (Saves parsing to float and then re-parsing to int)? – haxxxton Jan 20 '17 at 06:36
Thanks. You are right haxxxton. This function is just cheking if the value is Numeric or not. I wrote the example in that way just to make it clear. http://stackoverflow.com/questions/9716468/is-there-any-function-like-isnumeric-in-javascript-to-validate-numbers – naota Jan 20 '17 at 07:12
What i mean is, this data is coming directly from values that were stored in an SQL database, so they have already had a level of validation performed upon them, so perhaps anything outside of a `parseInt` is unnecessary code overhead? (more of a question/comment than a critique :) ) – haxxxton Jan 20 '17 at 07:20
Yeah, this function will be an overhead if all the values are guaranteed to be Numerical. But some people may think it's worth implementing just in case when the PHP code doesn't work properly. – naota Jan 20 '17 at 07:54

haxxxton · Answer 2 · 2017-01-20T06:37:42.780

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.

Sum column values in table

2 Answers2

Linked