Angular Datatables：如何使用 javaScript 动态获取所选列值的总和答案

【问题标题】：Angualr Datatables: How to get sum of selected column values dynamically using javaScriptAngular Datatables：如何使用 javaScript 动态获取所选列值的总和
【发布时间】：2020-12-29 09:09:20
【问题描述】：

有一个表格，如果我们勾选了金额值，则会自动求和并显示在顶部。尝试下面的代码，它得到值但没有得到准确的总和值。您能否提出问题所在..

checkboxCheckCount(info: any): void {
  var creditAmount = 0;
  $("#firstTable input:checked").each(function() {
    alert(info.index);
    if (info.index != "") {
      creditAmount += parseFloat(info.index);
    } else {
      creditAmount = creditAmount;
    }
  });

Stackblitz

【问题讨论】：

我的首选方法是在输入中添加更改功能，以便每次选中/取消选中一行时，总和都会相应修改。
除此之外，您的错误是您在每次迭代中都使用 info 求和，但是由于它是函数输入，因此每次迭代中的信息都是相同的，并且它不依赖于当前行循环
是的，不，我在标签中看到了 Angular 和 jQuery，这正是我所担心的。您正在犯将 Angular 和 jQuery 混合在一起的新手错误。只是不要那样做。这两个人，真的，真的不合。 Angular 从数据构建您的 HTML 表，这意味着 您的代码中有这些数据。现在您加载并使用另一个完全不同的库来读取 Angular 构建的 HTML 表中的数据，从您已有的数据中读取数据，这只是通过许多额外步骤读取变量。使用 Angular 或 jQuery，不要同时使用。

标签： javascript jquery angular datatables angular-datatables

【解决方案1】：

由于您已经在使用 each 循环遍历选中的复选框，因此您可以使用 $(this).closest("tr").find("td:eq(1)") 这将为您提供 amount 列 td 值，然后您可以将其传递给您的 creditAmount。

演示代码：

$('input[type="checkbox"]').on('change', function() {
  var creditAmount = 0;
  $("#firstTable input:checked").each(function() {
    //get td(amount column value)
    var values = $(this).closest("tr").find("td:eq(1)").text()
    if (values != "") {
      creditAmount += parseFloat(values);
    } 
  });
  $("#idCheckBoxLabel").text(creditAmount);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>
  <div>Count::<span id="idCheckBoxLabel"></span>
    <div>
      <div>
        <table datatable id="firstTable" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
          <thead>
            <tr>
              <th><input type="checkbox"></th>
              <th>Amount</th>
              <th>First name</th>
              <th>Last name</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>1</td>
              <td>Abc</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>2</td>
              <td>Abc</td>
              <td>xyz</td>
            </tr>
            <tr>
              <td><input type="checkbox" class="checkboxCls" name="id"></td>
              <td>3</td>
              <td>Abc</td>
              <td>xyz</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

【讨论】：