javascript - Sum column values in table - Stack Overflow

admin管理员组

文章数量:1401926

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=".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>

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./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/2g29c8uv/16/

• javascript
• php
• jquery

Share Improve this question Follow edited Jan 20, 2017 at 6:17 haxxxton 6,44233 gold badges2929 silver badges5858 bronze badges asked Jan 20, 2017 at 5:48 user5405873user5405873 13

• You mean to say don't want tp first two recordes, Right? – Hardik Kalathiya Commented Jan 20, 2017 at 5:50
• 1 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 Commented Jan 20, 2017 at 5:51
• yes it is --- i don't want first 2 records – user5405873 Commented Jan 20, 2017 at 5:51
• @haxxxton, i'm using php and data is obtained from mysql database – user5405873 Commented Jan 20, 2017 at 5:53
• can you post your php code you're using to output the table please – haxxxton Commented Jan 20, 2017 at 5:53

 |  Show 8 more ments

2 Answers 2

Sorted by: Reset to default 2

I guess what you want to do is something like this:

DEMO: https://jsfiddle/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.

本文标签： javascriptSum column values in tableStack Overflow