動的に生成された複数のテーブルの列の合計を見つける方法

Question

私は、以下のように表示される配列内のいくつかのデータを持つテーブルを持っています。この例では、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の合計を加算し続けます。誰もが私を教えることができる私は間違いをしたと私はどのように私は私が正しくあなたを理解していればまああなたに

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

Answer 2

ありがとうございました、他の二つの列

の合計を見つけることができる場所。各テーブルの合計を配列に格納することができます。私はコードが単独で説明すると思う...しかし、私は という名前の配列を、各テーブルの合計を含むfor文の外に '合計'として宣言します。 foreachがtempTotalのすべての値を合計するように終了したら、配列全体をプッシュして、最初のループの操作を保存します。第二...三...など

var total = []; 
 
    for(var i = 1; i <= 2; i++) 
 
    { 
 
    \t var tempTotal = 0; 
 
     var available = $(".used-community .plant_counter_"+i); 
 
     $.each(available, function(key, value) 
 
     { 
 
     \t \t 
 
      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>

Answer 3

あなたのコードに

ほんの少しの修正をし、それが動作します。複数の結果が必要なため、合計は配列である必要があります。わかりやすくするために、添付のコードスニペットを実行してください。そのテーブル・インスタンス内の各テーブルと作業上

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 4

を使用しないことをお勧め （Iは、全行が2つの余分な見当違いの列を有していると仮定する）

;$(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) { 
 
    \t return [$('td',$(r)).slice(-3) 
 
     \t .map(function(nc,c) { 
 
      return parseInt($(c).text()) || 0; }).toArray()]; 
 
    }).toArray(); 
 
    totals[nt] = rows.reduce(function(a, b) { 
 
    \t 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>