【问题标题】：How to make summary table by jQuery?如何用jQuery制作汇总表？
【发布时间】：2017-08-19 00:09:23
【问题描述】：

我有一张包含当年产品/客户的表格：

当我签入每个客户时，每个客户的表格列都会出现，当我取消选中时，客户列会隐藏。

现在我要制作使用产品数量的汇总表。

表格

<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();
});

示例：

因此，当我签入 John,Adam 时，汇总表会将两列 (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 中生成这个表呢？请帮我。

【问题讨论】：

我认为，您需要更改 html 结构。因为当您使用类名获取数量时，您会遇到一些问题。我认为您需要使用数据属性
怎么样？能详细描述一下吗？
是的，我可以 $("input:checkbox:not(:checked)").each(function() { var column = "table ." + $(this).attr("name" ); $(列).hide(); }); $("input:checkbox").click(function(){ var column = "table ." + $(this).attr("name"); $(column).toggle(); // 测试 1 var checkbox = $('input[type="checkbox"]:checked'); $.each(checkbox, function(index, el) { var checkbox_name = $(el).attr('name'), td_text = $("表。" + checkbox_name).text(); console.log(checkbox_name, td_text); }); });
我试试这个方法。但结果是 John John10 Adam Adam20
因为你使用类 sam 类名 John 和 10 这就是为什么当我得到数量时它的回报约翰10

标签： javascript jquery html html-table

【解决方案1】：

您应该使用map() 方法从客户表中获取所有可见金额。然后你可以使用reduce方法计算总和然后平均。

最初使用$("input:checkbox").last().change() 设置汇总表值，而不是您正在使用的each()。

注意：我添加了不同的类来区分两个表，并在表中使用了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>

【讨论】：