2010-03-08 49 views
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输入)?

理想情况下,我希望总数的值刚好改变,因为它被设置为其他输入的总和,因此它将自身设置为与页面加载和对其输入的任何更改的总和价值来源于。

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

回答

1

你可以做到这一点,而无需使用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 
}); 
+0

或'$(” #row1 .number“)。change(setTotal).change()' – karim79 2010-03-08 14:29:14

+1

@ karim79 - 这会计算页面加载时的总次数'n',看起来过于缩短了你得到的缩短。 – 2010-03-08 14:34:55

+1

你是真的,我完全忽略了这一点。太好了! – karim79 2010-03-08 14:49:58

0

当你做.val(getTotal)你设置val函数对象(这将无法正常工作)。如果您的电子邮件地址为.val(getTotal()),那么您只能在此时获得总计。

为什么不这样说:

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

事情是这样的:

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

你必须有一些事件导致的重新计算。在这里我已经完成了所有input.number元素的更改事件,您称这些元素不需要。你可以让它成为一个按钮事件,或者你喜欢的任何东西,但是没有办法让.total在没有任何事情发生的情况下“只是改变”。