使用JQuery汇总表列

时间:2015-07-25 12:25:28

标签: javascript jquery python google-app-engine jinja2

我有一份所有销售表,包括客户名称,日期和销售价格。

我有一个允许用户搜索表格的脚本,但我还想要一个脚本,它返回表格中可见的所有销售价格的总和。

e.g。如果用户搜索T.Toe,则脚本返回T.Toe的所有销售价格的总和。

代码:

<table class="well table table-condensed small" id="academy">
  <tr>
   <td colspan="3">
    <input type="text" id="search_academy" placeholder="  quick search" autocomplete="off">
   </td>
   <td><input type='text' style="width: 30px;" id='sum'></td>
  </tr>
  {% for sale in academy|sort(attribute="sale_date", reverse=True) %}
   {% if sale.price > 0 %}
    <tr class="success">
     {% else %}
    <tr class="danger">
   {% endif %}
  <th>{{ sale.sale_date.strftime('%d-%m-%Y') }}</th>
  {% if sale.client %}
   <th>{{ sale.client }}</th>
  {% else %}
   <th>{{ sale.concept }}</th>
  {% endif %}
  <th>{{ sale.club }}</th>
  <th class="prices">{{ sale.price }}</th>
  </tr>
  {% endfor %}
 </table>

JQuery用于在表上进行实时搜索并返回搜索到的单元格的总和:

编辑:

感谢@pointy和@ user4621032,脚本目前是:

 <script>$("#search_academy").keyup(function () {
  var value = this.value.toLowerCase().trim();

  $("#academy").find("tr").each(function (index) {
   if (!index) return;
   var id = $(this).find("th").text().toLowerCase().trim();
   $(this).toggle(id.indexOf(value) !== -1);
  });

  var sum = 0;
  $('.prices').each(function () {
   sum += parseFloat($(this).text());
  });

  $('#sum').val(sum);
 });
 </script>

我将parseInt更改为parseFloat以保留1位小数。

这会返回列中包含.prices类的所有单元格的总和。但是我正在寻找脚本来返回仅通过#search_academy中的用户搜索返回的.prices单元格的总和。

谢谢!

1 个答案:

答案 0 :(得分:0)

替换

sum + = parseInt(this.innerHTML);

RO

sum + = parseInt($(this).text());