1

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

如果我有一个类似电子表格的 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 的值发生变化，因为它被设置为其他输入的总和，因此它将自己设置为页面加载的总和以及对其值派生的输入的任何更改.

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

4

3 回答 3

2

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

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

如果您想自动触发，只需onchange像这样添加和页面加载：

$(function( {
  $("#row1 .number").change(setTotal); //When changing
  setTotal(); //On page load
});
于 2010-03-08T14:22:38.167 回答
1

像这样的东西：

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

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

于 2010-03-08T14:22:33.463 回答
0

当你这样做时，.val(getTotal)你正在设置val一个函数对象（这不起作用）。如果你这样做了.val(getTotal())，你只会在那一刻得到总数。

为什么不说这样的话：

$("#row1 .number).change(function () {
    $("#row1 .total").val(getTotal());
});
于 2010-03-08T14:22:06.630 回答