Question

我只是想知道这是否可行，如果没有，最好的方法是设置事件处理程序来实现这一点......

如果我有像这样的类似电子表格的HTML表格：

<table>
   <tr id="row1">
      <td><input type="text" class="number" value="1"/></td>
      <td><input type="text" class="number" value="2"/></td>
      <td><input type="text" class="total" /></td>
   </tr>
</table>

我可以写一个函数：

function getTotal() {
   var total = 0;
   $("#row1 .number").each(function() {
       total += Number($(this).val());
   };
   return total;
}

$("#row1 .total").val(getTotal);

这样输入total的值会自动更改为该行中number个输入的总和（无需为每个onchange设置number个事件处理程序输入）？

理想情况下，我希望total的值只是改变，因为它被设置为其他输入的总和，因此它将自己设置为页面加载和输入的任何更改的总和源于。

我正在尝试创建一个页面，用户在非总单元格中输入值，并且函数将验证输入，理想情况下，我希望避免每次用户创建时都更新每一行改变，但与此同时，我不想让事情变得过于复杂，因为必须写出总细胞应该只在其行中的细胞发生变化时更新。

Answer 1

您可以在不使用onchange的情况下执行此操作并在任何地方调用它：

function setTotal() {
   var total = 0;
   $("#row1 .number").each(function() {
       total += parseInt($(this).val());
   };
  $("#row1 .total").val(total);
}

如果您想自动触发，只需添加onchange和Pageload，如下所示：

$(function( {
  $("#row1 .number").change(setTotal); //When changing
  setTotal(); //On page load
});

Answer 2

这样的事情：

$('#row1 input.number').change(function(){
    var total = 0;
    $('.number').each(function(){
        total += +$(this).val();
    }
    $('.total').val(total);
});

您必须有一些导致重新计算的事件。在这里，我把它变成了所有input.number元素的更改事件，你说你不想要它。你可以把它变成一个按钮事件，或任何你喜欢的东西，但是没有办法让.total“只是改变”而不会发生任何事情。

Answer 3

执行.val(getTotal)时，您将val设置为函数对象（不起作用）。如果你做.val(getTotal())，那么你只能获得当时的总数。

为什么不说：

$("#row1 .number).change(function () {
    $("#row1 .total").val(getTotal());
});

自动生成其他输入的输入和的值？

3 个答案: