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

时间：2017-11-24 13:06:41

标签： javascript php jquery arrays

我有一个数组中的数据表，如下所示。在这个例子中，我显示了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的总和。任何人都可以教我错误的地方，我怎样才能找出其他两列的总和

谢谢

4 个答案:

答案 0 :(得分：1)

只需对您的代码进行一些小修改即可。由于您需要多个结果，因此您的总需要是一个数组。为清晰起见，请运行附加的代码段。

＆＃13;
＆＃13; 
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]);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：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 :(得分：1)

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

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

答案 3 :(得分：0)

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

＆＃13;
＆＃13; 
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);
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题