如何找到动态生成的多个表列的总和答案

【问题标题】：How to find the sum of dynamically generated multiple table columns如何找到动态生成的多个表列的总和
【发布时间】：2017-11-24 13:06:41
【问题描述】：

我有一个数组，其中包含一些数据，如下所示。在这个例子中，我显示了 2 个表数据，但它可以超过 2 个。我必须计算每个表的列数、集合 1 和集合 2，然后在每个表的末尾显示。

到目前为止，我已经尝试了以下代码来计算我首先通过计数数组计算可用表数的位置。

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

我的代码正在正确计算类“plant_counter_1”的行，但对于下一个表，它也继续添加表 1 的总和。谁能教我我在哪里做错了，我怎样才能找出其他两列的总和

谢谢

【问题讨论】：

好的，您需要将总变量放在第一个循环中 $.each(...) 之前的位置
通过使用 for 循环一来增加 i ，您已经选择了所有的 plant_counter_ ，然后将其添加到同一个变量“total”中。由于所有表中的值都将指向同一个变量“总计”。要更新每个表的总变量，请将其放在 `for(var i = 1; i
@nullqube 哈哈。谢谢，是的，那是我的错误。如何总结其他列？

标签： javascript php jquery arrays

【解决方案1】：

循环遍历每个表并在该表实例中工作。总数据计数并不是真正需要的，因为它不会分解表的数量。

由于您可以轻松隔离表实例，我建议您在所有表中使用通用类名，不要使用增量类名

$('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>

【讨论】：

【解决方案2】：

只需对您的代码稍作修改即可。由于您需要多个结果，因此您的总数需要是一个数组。为了清楚起见，请运行附加的代码 sn-p。

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>

【讨论】：

【解决方案3】：

让事情变得有趣（我假设总行有两个额外的错位列）

;$(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>

【讨论】：

【解决方案4】：

如果我理解正确的话。您可以将每个表的总和存储到数组中。我认为代码单独解释......但我声明了一个名为 'total' 在包含每个表的总数的 for 语句之外。当 foreach 完成对 tempTotal 中所有值的求和时，然后对总数组进行推送并保存第一个循环的操作。还有第二个……第三个……等等

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>

【讨论】：