jQueryでサマリーテーブルを作成するには？

Question

私は年内に製品/顧客のテーブルを持っています：

私は各顧客をチェックインすると、顧客の列が非表示になっていると、各顧客のテーブルの列が表示されます。

これで商品数量のサマリーテーブルを作成する必要がありました。

表

<div class="container"> 
    <p> 
     <input type="checkbox" name="John" checked="checked" /> John</p> 
    <p> 
     <input type="checkbox" name="Adam" checked="checked" /> Adam</p> 
    <p> 
     <input type="checkbox" name="Paul" checked="checked" /> Paul</p> 
    <h2>Customers Table</h2> 
    <p>Customer with Table</p> 
    <table class="table"> 
     <thead> 
      <tr> 
       <th>Year/Product Quantity</th> 
       <th class="John">John</th> 
       <th class="Adam">Adam</th> 
       <th class="Paul">Paul</th> 
      </tr> 
     </thead> 
     <tr> 
      <th>2010</th> 
      <th class="John">10</th> 
      <th class="Adam">20</th> 
      <th class="Paul">30</th> 
     </tr> 
     <tr> 
      <th>2011</th> 
      <th class="John">20</th> 
      <th class="Adam">40</th> 
      <th class="Paul">60</th> 
     </tr> 
     <tr> 
      <th>2012</th> 
      <th class="John">30</th> 
      <th class="Adam">80</th> 
      <th class="Paul">70</th> 
     </tr> 
    </table> 
</div> 

そしてスクリプトjsのは次のとおりです。

$("input:checkbox:not(:checked)").each(function() { 
    var column = "table ." + $(this).attr("name"); 
    $(column).hide(); 
}); 

$("input:checkbox").click(function(){ 
    var column = "table ." + $(this).attr("name"); 
    $(column).toggle(); 
}); 

例：私はジョン、アダムにチェックすると

したがって、サマリー表は、2の量を合計します列（10 + 20 = 30）をチェックし、チェックインした列の平均と条件を調べます。ただ、この表のように

：

<p>Summery Table</p> 
<table class="table"> 
    <thead> 
     <tr> 
      <th>Year/Product Quantity</th> 
      <th>Average</th> 
      <th>Condition</th> 
     </tr> 
    </thead> 
    <tr> 
     <th>2010</th> 
     <th>15</th> 
     <th>Good</th> 
    </tr> 
    <tr> 
     <th>2011</th> 
     <th>40</th> 
     <th>Good</th> 
    </tr> 
    <tr> 
     <th>2012</th> 
     <th>60</th> 
     <th>Good</th> 
    </tr> 
</table> 

レッツ、> 10平均場合は、そうでない場合は、悪い良いです。

私はこのテーブルをJavascript/jQueryでどのように作成できますか？ 私を助けてください。

Answer 1

map()メソッドを使用して得意先テーブルからすべての金額を取得する必要があります。そして、reduceメソッドを使用して合計&を計算し、次に平均を計算することができます。

each()の代わりに$("input:checkbox").last().change()を使用して、サマリーテーブルの値を最初に設定してください。

N.B： 2つのテーブルを区別するために異なるクラスを追加し、テーブルにtbodyを使用しました。

$("input:checkbox").change(function() { 
 
    var column = $('.customerTable').find('.' + $(this).attr("name")); 
 
    $(column).toggle(this.checked); 
 

 
    var customerTrs = $('.customerTable tbody tr'), 
 
     summaryTable = $('.summaryTable tbody').empty(); 
 

 
    customerTrs.each(function() { 
 
     var tr = $(this), 
 
      year = tr.find('th').first().text(); 
 

 
     var visibleQuantities = tr.find('th:gt(0):visible').map(function() { 
 
      return +$(this).text(); 
 
     }).get(); 
 

 
     var total = visibleQuantities.reduce(function(a, b) { 
 
      return a + b; 
 
     }, 0); 
 

 
     var avg = total && total/visibleQuantities.length; 
 

 
     var summaryTrs = '<tr><th>'+year+'</th><th>'+avg+'</th><th>'+(avg > 10 ? 'good' : 'bad')+'</th></tr>'; 
 

 
     summaryTable.append(summaryTrs); 
 
    }); 
 
}); 
 

 
$("input:checkbox").last().change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <p><input type="checkbox" name="John" checked="checked" /> John</p> 
 
    <p><input type="checkbox" name="Adam" checked="checked" /> Adam</p> 
 
    <p><input type="checkbox" name="Paul" checked="checked" /> Paul</p> 
 

 
    <h2>Customers Table</h2> 
 
    <table class="table customerTable"> 
 
     <thead> 
 
      <tr> 
 
       <th>Year/Product Quantity</th> 
 
       <th class="John">John</th> 
 
       <th class="Adam">Adam</th> 
 
       <th class="Paul">Paul</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <th>2010</th> 
 
       <th class="John">10</th> 
 
       <th class="Adam">20</th> 
 
       <th class="Paul">30</th> 
 
      </tr> 
 
      <tr> 
 
       <th>2011</th> 
 
       <th class="John">20</th> 
 
       <th class="Adam">40</th> 
 
       <th class="Paul">60</th> 
 
      </tr> 
 
      <tr> 
 
       <th>2012</th> 
 
       <th class="John">30</th> 
 
       <th class="Adam">80</th> 
 
       <th class="Paul">70</th> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div> 
 

 
<h2>Summery Table</h2> 
 
<table class="table summaryTable"> 
 
    <thead> 
 
     <tr> 
 
      <th>Year/Product Quantity</th> 
 
      <th>Average</th> 
 
      <th>Condition</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
</table>