如何使用 javascript 遍历 ASP .NET 文本框并计算一个值？答案

【问题标题】：How to iterate through ASP .NET textboxes using javascript and calculate a value?如何使用 javascript 遍历 ASP .NET 文本框并计算一个值？
【发布时间】：2010-04-22 18:29:00
【问题描述】：

我在转发器中有多个文本框，我将在运行时在这些文本框中输入值。我想要在一个标签中的这些文本框中输入的所有值的总和。我想使用 java 脚本来做这件事。所以你能帮帮我吗？

【问题讨论】：

这里不是你要求完成代码的地方。尝试编写代码，然后在遇到困难时寻求帮助。
JQuery forum 上有关于此主题的讨论可能会有所帮助。
有人请重命名这个。也许重新标记。并且一些更多的信息也不会受到伤害。

标签： .net asp.net javascript asp.net-ajax

【解决方案1】：

这里有一个想法可以帮助您入门：

在您的Repeater 周围加上一个<div>，并赋予它一个独特的id。
在 JavaScript 中使用 document.getElementById() 函数来获取对 <div> 的引用。
使用 DOM 元素中的 getElementsByTagName() 函数查找其中的所有 <input>s。
循环遍历它们，将它们的值（解析为整数）相加。

如果你的标记看起来像这样：

<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 输出的每一“行”中有多个文本框，并且您只想对一个“组”框的值求和，则需要更改脚本一点。这里有两种可能的解决方案 - 选择一个：

如果您确切知道每个“行”中有多少 <input> 元素，则可以将客户端脚本中的 for 循环更改为仅访问每第 N 个元素。例如。仅选择每行中三个字段中的最后一个：for (var i = 2; i < inputs.length; i += 3)
更改您的标记，在 <input> 元素上包含一个 class 属性，作为总和的一部分。在for 循环中，对inputs[i].className 进行测试，以验证是否要包含特定字段。

【讨论】：

你没关系，但我有 3 个不同的 coulmn。如果我执行此逻辑，那么它将对所有文本框进行求和。因为我想要 txext 框的唯一 ID。但是当我做容器时。 getElementByID.it 不受支持。它只支持 container.getElementTagName。我想要 3 个不同的总和用于 3 个不同的 coulmn。如果我做简单的 document.getelementID() 它也不起作用，因为在转发器中它们为所有文本框生成不同的 id。有没有办法得到那个不同的 id 在循环中。
container.getElementById()（注意小写 d）被支持，但在这里对你没有帮助。 <input> 上的 id 属性的值由 ASP.NET 确定，并且在整个页面中确实是唯一的。
@Nikunj：我已经更新了我的答案，提供了一些关于如何绕过您评论中提出的额外要求的想法。
最后我使用了这个。因为使用这个我可以使用类识别文本框。 viralpatel.net/blogs/2009/07/…

【解决方案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。

【讨论】：

你没关系，但我有 3 个不同的 coulmn。如果我执行此逻辑，那么它将对所有文本框进行求和。因为我想要 txext 框的唯一 ID。但是当我做容器时。 getElementByID.it 不受支持。它只支持 container.getElementTagName。我想要 3 个不同的总和用于 3 个不同的 coulmn。如果我做简单的 document.getelementID() 它也不起作用，因为在转发器中它们为所有文本框生成不同的 id。有没有办法得到那个不同的 id 在循环中

【解决方案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。

【讨论】：

【解决方案4】：

获取 jQuery。使用例如 CssClass ='totals' 将类添加到转发器标记中的文本框。使用以下 jQuery 代码对值进行合计

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

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

alert('Total is ' + total);

【讨论】：