sanin sanin - 11 months ago 100
jQuery Question

How to find the sum of dynamically generated multiple table columns

I have table with some data in an array to be displayed as below. In this example, I display 2 table datas but it can be more than 2. I have to calculate the column population, collection 1 and collection 2 of each table and show then at the end of each table.

So far I have tried following code to calculate where I first calcuate the number of tables available by counting array.

<script type="text/javascript">
var count = <?php echo json_encode(count($lists)); ?>;
var total = 0;
for(var i = 1; i <= count; i++)
{
var available = $(".used-community .plant_counter_"+i);
$.each(available, function(key, value)
{
total+=parseInt(available[key].innerText);
});
console.log(total);//edit variable name - totala changed to total
}
</script>




<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="47" class="rowList middle">
<td>Wangkha</td>
<td>Soi Wangkha 3</td>
<td class="plant_counter_1">100000</td>
<td>31</td>
<td>11315</td>
</tr>

<tr id="43" class="rowList middle">
<td>one</td>
<td>one address</td>
<td class="plant_counter_1">35000</td>
<td>7</td>
<td>2555</td>
</tr>

<tr id="46" class="rowList middle">
<td>Bang</td>
<td>Bang khuwang Rd</td>
<td class="plant_counter_1">6000</td>
<td>2</td>
<td>730</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

<table class="table" border="1">
<thead>
<tr class="titlerow">
<th>Name</th>
<th>Address</th>
<th>Population</th>
<th>Collection 1</th>
<th>collection 2</th>
</tr>
</thead>
<tbody class="used-community">
<tr id="45" class="rowList middle">
<td>sap</td>
<td>sap thawi</td>
<td class="plant_counter_2">80000</td>
<td>15</td>
<td>5475</td>
</tr>
<tr id="44" class="rowList middle">
<td>two-nonthaburi</td>
<td>nonthaburi</td>
<td class="plant_counter_2">69000</td>
<td>11</td>
<td>4015</td>
</tr>
<tr bgcolor="#66CCFF">
<td></td>
<td></td>
<td></td>
<td class="col"></td>
<td class="cap"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>





My code is calculating the row with class "plant_counter_1" correctly but for next table it continue adding the sum of table 1 as well. Can anybody teach me where I did mistake and I how can I find out the sum of other two columns

Thank You

Answer Source

Loop over each table and work within that table instance. The total data count is not really needed since it doesn't break down the number of tables.

Since you can easily isolate table instances I would suggest you use common class names across all tables and don't use incremental ones

$('table').each(function(){
   var $table =$(this),
    $rows = $table.find('tbody tr'),
    $lastRowCells = $rows.last().children(),
    collectionTotals = $rows.not(':last').map(function(){
        var $cells = $(this).children()
        return [[+$cells[3].textContent, +$cells[4].textContent]]
   }).get()
    .reduce(function(a,c){
       $.each(c,function(i, val){
           a[i] += val;
       });       
       return a;
    },[0,0]);
    
    $lastRowCells.eq(3).text(collectionTotals[0]);
    $lastRowCells.eq(4).text(collectionTotals[1]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" border="1">
  <thead>
    <tr class="titlerow">
      <th>Name</th>
      <th>Address</th>
      <th>Population</th>
      <th>Collection 1</th>
      <th>collection 2</th>
    </tr>
  </thead>
  <tbody class="used-community">
    <tr id="47" class="rowList middle">
      <td>Wangkha</td>
      <td>Soi Wangkha 3</td>
      <td class="plant_counter">100000</td>
      <td>31</td>
      <td>11315</td>
    </tr>

    <tr id="43" class="rowList middle">
      <td>one</td>
      <td>one address</td>
      <td class="plant_counter">35000</td>
      <td>7</td>
      <td>2555</td>
    </tr>

    <tr id="46" class="rowList middle">
      <td>Bang</td>
      <td>Bang khuwang Rd</td>
      <td class="plant_counter">6000</td>
      <td>2</td>
      <td>730</td>
    </tr>
    <tr bgcolor="#66CCFF">
      <td></td>
      <td></td>
      <td></td>
      <td class="col"></td>
      <td class="cap"></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

<table class="table" border="1">
  <thead>
    <tr class="titlerow">
      <th>Name</th>
      <th>Address</th>
      <th>Population</th>
      <th>Collection 1</th>
      <th>collection 2</th>
    </tr>
  </thead>
  <tbody class="used-community">
    <tr id="45" class="rowList middle">
      <td>sap</td>
      <td>sap thawi</td>
      <td class="plant_counter">80000</td>
      <td>15</td>
      <td>5475</td>
    </tr>
    <tr id="44" class="rowList middle">
      <td>two-nonthaburi</td>
      <td>nonthaburi</td>
      <td class="plant_counter">69000</td>
      <td>11</td>
      <td>4015</td>
    </tr>
    <tr bgcolor="#66CCFF">
      <td></td>
      <td></td>
      <td></td>
      <td class="col"></td>
      <td class="cap"></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download