如何使用javascript遍歷ASP .NET文本框並計算值？

Question

我在轉發器中有多個文本框，我將在運行時在這些文本框中輸入值。 我想要在一個標簽中的那些文本框中輸入的所有值的總和。我想使用Java腳本執行此操作。 你能幫我嗎

Answer 1

這是一個讓您入門的想法：

1. 在您的Repeater周圍放一個<div> ，並為其指定一個唯一的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>的type=text實際上是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>

使用jQuery的javascript：

$(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);