如何使用JavaScript迭代通過ASP .NET文本框並計算值？

Question

我在中繼器中有多個文本框，我將在運行時在那些文本框中輸入值。我想在一個標籤中輸入在這些文本框中輸入的所有值的總和。我想用java腳本來做這件事。所以你可以幫我。

Answer 1

這裏有一個想法，讓你開始：

1. 將一個<div>你Repeater周圍，給它一個獨特的id。
2. 使用JavaScript中的document.getElementById()函數獲取對該<div>的引用。
3. 使用DOM元素中的getElementsByTagName()函數查找所有內部的<input>。
4. 循環它們，將它們的值（分解爲整數）一起添加。

所以，如果您的標記看起來是這樣的：

<div id="coolStuff"> 
    <asp:Repeater ... > 
</div> 

中的JavaScript看起來大約是這樣的：

var container = document.getElementById("coolStuff"); 
var inputs = container.getElementsByTagName("input"); 

var sum = 0; 

for (var i = 0; i < inputs.length; i++) { 
    sum += inputs[i].value; 
} 

alert(sum); 

現在，這個代碼不檢查，以確保<input> s爲實際上是type=text或確認輸入的值是數字。那些部分被留下作爲練習讀者;）

---

編輯：如果您有多個文本框由Repeater輸出的每一「行」，你只需要值相加爲一個「組」的盒子，你需要稍微改變腳本。這裏有兩個可能的解決方案 - 選擇一個：

1. 如果你知道你到底有多少<input>元素在每個「行」，你可以在客戶端腳本改變for循環，不僅可以訪問每第N個元素。例如。只有在每行選擇的最後三個字段：for (var i = 2; i < inputs.length; i += 3)

2. 更改您的標記，包括在<input>元素class屬性是總和的一部分。在for循環中，對inputs[i].className進行測試以驗證是否包含特定字段。

Answer 2

就像這樣，假設你想總結中繼控制中的所有文本框。這隻會對數值進行求和。

var repeater = document.getElementById('repeater_id'); 
var inputs = repeater.getElementsByTagName('input'); 
var sum = 0; 
for (var i=0; i < inputs.length; i++) { 
    if (inputs[i].type === "text" && /^\d+$/.test(inputs[i].value)) { 
     sum += inputs[i].value; 
    } 
} 

如果你正在做很多客戶端的東西，爲什麼不看看這樣的庫，如jQuery。

Answer 3

<asp:Repeater ID="rpt" CssClass="rpt"> 
<itemTemplate> 
    <asp:TextBox ID="txtValue" /> 
</itemTemplate> 
<footerTemplate> 
    <asp:Label Id="lblResult" CssClass="result" /> 
</footerTemplate> 
</asp:Repeater> 

JavaScript的使用jQuery：

$(document).ready(function(){ 
    $('.rpt input[type=text]').live('onchange', calc); 
}); 

function calc(){ 
    var result = 0; 
$('.rpt input[type=text]').each(function(){ 
    // need better input cleaning here... 
    result += parseInt($(this).val()); 
    }); 
    $('.rpt .result').val(result); 
} 

HTH。

Answer 4

獲取jQuery。 使用例如CssClass ='totals'將類添加到中繼器標記中的文本框中。使用以下jQuery代碼來合計值

var total = 0; 
$('input.totals').each(function(){ 

if (!isNan($(this).text())) total += $(this).text() 
}); 

alert('Total is ' + total);