2010-03-08 64 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在沒有任何事情發生的情況下「只是改變」。