javascript - 使用 jquery 在表列中添加美元金额

Question

我有一个大约有 5 列的表。最后一列名为“金额”。假设有 100 条记录。如何动态添加金额...

Amount
1. $100.00
2. $25.23
3. $24.00
4. $12.43

Total: $184.43

这里棘手的部分是可以根据过滤器更改行。所以这是一个假的例子，但假设我单击一个显示“仅显示偶数行”的按钮，单击时它只会显示偶数行并添加总计

$('.but-even')on('click',function(){
  $('.odd').hide()
})

2. $25.23
4. $12.43

Total: $37.66

如何才能在进行更改时始终添加列金额？这是表格的样子。我试图只添加最后几列并将它们总计在底部。

<table class="table table-bordered table-striped table-hover table-condensed" id="carrier-broad-view-table" style="table-layout: fixed; min-width: 1405px;"><colgroup><col style="width: 108px;"><col style="width: 194px;"><col style="width: 131px;"><col style="width: 149px;"><col style="width: 172px;"><col style="width: 190px;"><col style="width: 150px;"><col style="width: 151px;"><col style="width: 161px;"></colgroup>

  <thead><tr class="size-row" aria-hidden="true" style="height: 31.5px;"><th class="floatThead-col" aria-label="CarrierID" style="height: 31.5px;"></th><th class="floatThead-col" aria-label="Rate Count" style="height: 31.5px;"></th><th class="floatThead-col" aria-label="Rate Amount" style="height: 31.5px;"></th><th class="floatThead-col" aria-label="Payment Count" style="height: 31.5px;"></th><th class="floatThead-col" aria-label="Payment Amount" style="height: 31.5px;"></th><th class="floatThead-col" aria-label="Total Count" style="height: 31.5px;"></th><th class="floatThead-col" aria-label="Total Amount" style="height: 31.5px;"></th><th class="floatThead-col" aria-label="Claim Amount" style="height: 31.5px;"></th></tr></thead><tbody>

    <tr class="all carrierID-3041">
      <td style="text-align:center;">3041</td>
      <td nowrap="" style="text-align:center;">73</td>
      <td nowrap="" style="text-align:center;">$48,997.00</td>
      <td nowrap="" style="text-align:center;">14</td>
      <td nowrap="" style="text-align:center;">$8,277.96</td>
      <td nowrap="" style="text-align:center;"><a href="#" class="viewDetails" data-carrierid="3041">view details <i class="fa fa-arrow-right text-primary fa-xs"></i></a></td>
      <td nowrap="" style="text-align:center;">87</td>
      <td nowrap="" style="text-align:center;">$57,274.96</td>
    </tr>

    <tr class="all carrierID-4157">
      <td style="text-align:center;">4157</td>
      <td nowrap="" style="text-align:center;">1625</td>
      <td nowrap="" style="text-align:center;">$660,692.68</td>
      <td nowrap="" style="text-align:center;">40</td>
      <td nowrap="" style="text-align:center;">$21,006.23</td>
      <td nowrap="" style="text-align:center;"><a href="#" class="viewDetails" data-carrierid="4157">view details <i class="fa fa-arrow-right text-primary fa-xs"></i></a></td>
      <td nowrap="" style="text-align:center;">1665</td>
      <td nowrap="" style="text-align:center;">$681,698.91</td>
    </tr>

    <tr class="all carrierID-41521">
      <td style="text-align:center;">4157</td>
      <td nowrap="" style="text-align:center;">1625</td>
      <td nowrap="" style="text-align:center;">$660,692.68</td>
      <td nowrap="" style="text-align:center;">40</td>
      <td nowrap="" style="text-align:center;">$21,006.23</td>
      <td nowrap="" style="text-align:center;"><a href="#" class="viewDetails" data-carrierid="4157">view details <i class="fa fa-arrow-right text-primary fa-xs"></i></a></td>
      <td nowrap="" style="text-align:center;">1665</td>
      <td nowrap="" style="text-align:center;">$42,692.91</td>
    </tr>

  </tbody>
</table>

Answer 1

您可以在点击事件上执行类似的操作

我使用even call只是为了测试目的

$('.even').hide()
  var total = 0;
  var oddElements = $('.odd').find('td:last-child');
  console.log(a);
  for(var index = 0; index < oddElements.length; b++)
  {
  total  += parseFloat($(oddElements[index]).text().replace(',','').split("$")[1]);
  }
   + $("#total").text("$"+total);

这是一个 fiddle https://jsfiddle.net/qoy42acd/