Question

我有一张约有5列的表格。最后一列名为Amount。说有100条记录。如何动态添加金额......

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

2. $25.23
4. $12.43

Total: $37.66

这里棘手的部分是可以根据过滤器更改行。所以这是一个假的例子，但是我说点击一个按钮，上面写着＆＃34;只显示偶数行＆＃34;当点击它时，它只会显示偶数行并添加总计

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

如何制作，以便在更改时始终添加列数量？这是表格的样子。我试图只添加最后一列并将它们全部放在底部。

{{1}}

Answer 1

下面的内容应该有效（伪代码，因为你没有发布你的HTML结构）;

首先是一个javascript函数，用于收集表行数量数据并设置总量。

您可能需要更改td选择器以适合您的表格。您可以使用:nth-child(int)选择正确的td。

function setTable() {

   var total;
   $('#myTable tr > td:last-of-type').each(function() {

       total += parseInt(row.innerText.replace('$', ''));
   });

   $('#total').text('Total: $' + total);
}

只需确保在修改表格的任何行后调用该函数，如下所示;

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

希望这有助于你。

Answer 2

您可以在点击事件

上执行此类操作

我甚至只是为了测试而使用了电话

$('.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);

这是一个小提琴 https://jsfiddle.net/qoy42acd/

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

2 个答案: