javascript - 使用jquery的列总和

问题描述

我需要将列与OnKeyup或相加OnChange

这是我的代码：

$(document).ready(function() {
  $(".expenses").on('keyup change', calculateSum);
});
function calculateSum() {
  var $input = $(this);
  var $row = $input.closest('tr');
  var sum = 0;
  $row.find(".expenses").each(function() {
    sum += parseFloat(this.value) || 0;
  });
  $row.find(".expenses_sum").val(sum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th>sl</th>
    <th>TA</th>
    <th>DA</th>
  </tr>
  <tr>
    <td>1</td>
    <td><input class="expenses"></td>
    <td><input class="expenses"></td>
  </tr>
  <tr>
    <td>2</td>
    <td><input class="expenses"></td>
    <td><input class="expenses"></td>
  </tr>
  <tr>
  <td>Total</td>
   <td><input class="expenses_sum"></td>
   <td><input class="expenses_sum"></td>
  </tr>
</table>

标签： javascriptjqueryhtml

这是输入的“上下文”很重要的时候：您想要更新与更新输入元素的同一列中的总和。

你可以做的是：

<td>获取输入所属元素的索引
计算属于同一列的所有费用的总和。这是通过过滤（使用.filter()）所有.expenses元素来完成的，以确保它们的父<td>索引与您在步骤 2 中确定的索引匹配
.expenses_sum在同一列中的相应元素上设置总和。这又是通过过滤所有.expenses_sum元素并仅获取其父<td>索引匹配的元素来完成的

一些额外的专业提示：

听onInput事件。为方便起见，对于涵盖onKeyUp和onChange事件的输入元素。
用于<input type="number" />防止用户错误输入非数字字符
<input readonly />在元素上使用.expenses_sum，这样用户就不会自己摆弄那个总和
请记住将输入元素的值转换为数字。这可以通过使用+运算符来完成，即+this.value。请记住，根据规范，所有输入元素，无论它们的type，始终具有其类型的值string
链接.each(calculateSum)到您的原始选择，以便您在第一次加载页面时也计算总和，即$(".expenses").on('input', calculateSum).each(calculateSum);. .expenses例如，当元素可能预先填充了来自服务器端的值（或者如果您手动定义了）时，这非常有用value="..."。

请参阅下面的概念验证：

$(document).ready(function() {
  $(".expenses").on('input', calculateSum).each(calculateSum);
});

function calculateSum() {
  // Get the index of the parent `<td>` element
  var cellIndex = $(this).closest('td').index();
  
  // Get the values of expenses in the same column as the `<td>` element
  var allExpensesInSameColumn = $('.expenses').map(function() {
    if ($(this).closest('td').index() !== cellIndex)
      return;
      
    return +this.value;
  }).get();
  
  // Calculate the sum from returned array of values
  var sumOfExpensesInSameColumn = allExpensesInSameColumn.reduce(function(acc, curVal) {
    return acc + curVal;
  });
  
  // Set the sum on the `.expenses_sum` element in the corresponding column
  $('.expenses_sum').each(function() {
    if ($(this).closest('td').index() !== cellIndex)
      return;

    this.value = sumOfExpensesInSameColumn;
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th>sl</th>
    <th>TA</th>
    <th>DA</th>
  </tr>
  <tr>
    <td>1</td>
    <td><input class="expenses" type="number" /></td>
    <td><input class="expenses" type="number" /></td>
  </tr>
  <tr>
    <td>2</td>
    <td><input class="expenses" type="number" /></td>
    <td><input class="expenses" type="number" /></td>
  </tr>
  <tr>
    <td>Total</td>
    <td><input class="expenses_sum" readonly></td>
    <td><input class="expenses_sum" readonly></td>
  </tr>
</table>

javascript - 使用jquery的列总和

问题描述

解决方案

推荐阅读