如何查找动态生成的多个表列的总和

Question

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 1

Just a small modification to your code and it will work. Since you need multiple results, your total needs to be an array. Please run attached code snippet for clarity.

 var count =2;//change back to your php <?php echo json_encode(count($lists)); ?>; var total = new Array(); total.push(0); for(var i = 1; i <= count; i++) { total.push(0); var available = $(".used-community .plant_counter_"+i); $.each(available, function(key, value) { total[i]+=parseInt(available[key].innerText); }); total.push(0); console.log(total[i]); } 

 <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_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> 

Answer 2

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> 

Answer 3

to make things a little bit of fun (I assumed the total rows have two extra misplaced columns)

 ;$(function() { var tables = $('table > tbody'); var totals = new Array(tables.length); tables.each(function(nt,t) { var rows = $('tr',t); var totalElement = rows.splice(-1); rows = rows.map(function(nr, r) { return [$('td',$(r)).slice(-3) .map( function(nc,c) { return parseInt($(c).text()) || 0; }).toArray()]; }).toArray(); totals[nt] = rows.reduce( function(a, b) { return a.map(function(v,n) { return v + b[n]; }); }, [0,0,0] ); $('td',totalElement[0]).splice(-3).forEach(function(c,n) { $(c).text(totals[nt][n]); }); }); console.log(totals); }); 

 <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_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> </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> </tr> </tbody> </table> 

Answer 4

Well if I understand you correctly. You can store the total sum of each table into array. I think the code explain alone... But I declare an array named 'total' outside of the for statement that contain the total of each table. When the foreach finish to sum all the values in tempTotal, then do a push to total array and save the operation of the first loop. and the second... third... etc

 var total = []; for(var i = 1; i <= 2; i++) { var tempTotal = 0; var available = $(".used-community .plant_counter_"+i); $.each(available, function(key, value) { tempTotal = tempTotal + parseInt(available[key].innerText); }); total.push(tempTotal); } console.log(total); 

 <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_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>