我有一个表格,其中有使用jquery动态添加的文本框。 文本框ID形成一个数组,即Quantity [0],Quantity [1],Quantity [2] ...
我想在这些文本框中添加数字,并在另一个名为“total_quantity”的文本框中显示该值,最好是将焦点移出数组文本框。
我该怎么办?我不介意使用jQuery或简单的javascript,这更容易。
答案 0 :(得分:8)
我建议为您的数量字段提供一个公共类,以便:
<input type="text" class="quantity" onblur="calculateTotal();" />
然后你就可以用jQuery定义以下函数:
function calculateTotal() {
var total = 0;
$(".quantity").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
total += parseFloat(this.value);
}
});
$("#total_quantity").val(total);
}
每次焦点从数量字段移开时,onblur
事件都会触发。反过来,这将调用calculateTotal()
函数。
如果您不想添加公共类,可以使用$("input[id^='Quantity[']")
选择器,正如Felix在下面的评论中所建议的那样。这将匹配ID为Quantity[
答案 1 :(得分:1)
var Total = 0;
$("input[id^='Quantity[']").each(function() { Total += $(this).val()|0; });
$("#total_quantity").val(Total);
答案 2 :(得分:0)
如果不能使用document.getElementsByName(),请使用以下函数,因为某些MVC框架(如Struts和Spring MVC)使用文本的name属性将元素绑定到后端对象。
function getInputTypesWithId(idValue) {
var inputs = document.getElementsByTagName("input");
var resultArray = new Array();
for ( var i = 0; i < inputs.length; i++) {
if(inputs[i].getAttribute("id") == idValue) {
resultArray.push(inputs[i]);
}
}
return resultArray;
}