Javascript 自动计算动态文本框值的总和
我正在做一个php,mysql网站的帐单。。。我想得到文本框中的值之和。。可以根据用户需求添加行。。。但是我试了很多东西。。但是没有得到正确的答案。。。。如何获取最后一列rate中所有文本框值的总和。。。我的意思是没有任何用户输入,比如按钮点击。。。。。有人能帮我翻译一下这个代码吗 提前谢谢 我为向表中添加行而编写的代码Javascript 自动计算动态文本框值的总和,javascript,php,html,mysql,Javascript,Php,Html,Mysql,我正在做一个php,mysql网站的帐单。。。我想得到文本框中的值之和。。可以根据用户需求添加行。。。但是我试了很多东西。。但是没有得到正确的答案。。。。如何获取最后一列rate中所有文本框值的总和。。。我的意思是没有任何用户输入,比如按钮点击。。。。。有人能帮我翻译一下这个代码吗 提前谢谢 我为向表中添加行而编写的代码 function addRow(tableID) { var table = document.getElementById(tableID)
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name="s_no[]";
element1.size="25";
element1.value = rowCount;
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name="p_id[]";
element2.size="25";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name="p_name[]";
element3.size="25";
cell3.appendChild(element3);
var cell5 = row.insertCell(3);
var element5 = document.createElement("input");
element5.type = "text";
element5.name="mrp[]";
element5.size="25";
cell5.appendChild(element5);
var cell6 = row.insertCell(4);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "qty[]";
element6.size="25";
cell6.appendChild(element6);
var cell7 = row.insertCell(5);
var element7 = document.createElement("input");
element7.type = "text";
element7.name = "rate[]";
element7.size="25";
cell7.appendChild(element7);
var cell8 = row.insertCell(6);
var element8 = document.createElement("input");
element8.type = "checkbox";
element8.name = "check";
cell8.appendChild(element8);
}
表格的Html代码:
S.编号
产品Id
品名
物料需求计划
数量
比率
检查
全部的 试试这个:
$('input[name^="rate"]').change(function() {
var sum = 0;
$('input[name^="rate"]').each(function() {
sum = sum + parseInt($(this).val()); // Or parseFloat if you are going to allow floating point numbers.
});
console.log(sum);
//$('#total_input').val(sum); //Your input to show the total
//$('#total_input').html(sum); //If is div, paragraph or another type of container.
});
确保输入只允许数字很重要。HTML:
<input name="qty[]" type="text" value="0" /><br />
<input name="qty[]" type="text" value="0" /><br />
<input name="qty[]" type="text" value="0" /><br />
<input name="qty[]" type="text" value="0" /><br />
<input name="qty[]" type="text" value="0" /><br />
<input name="sum" type="text" value="0" />
//Get a list of input fields to sum
var elements = document.getElementsByName("qty[]");
var element_array = Array.prototype.slice.call(elements);
//Assign the keyup event handler
for(var i=0; i < element_array.length; i++){
element_array[i].addEventListener("keyup", sum_values);
}
//Function to sum the values and assign it to the last input field
function sum_values(){
var sum = 0;
for(var i=0; i < element_array.length; i++){
sum += parseInt(element_array[i].value, 10);
}
document.getElementsByName("sum")[0].value = sum;
}
Javascript:
<input name="qty[]" type="text" value="0" /><br />
<input name="qty[]" type="text" value="0" /><br />
<input name="qty[]" type="text" value="0" /><br />
<input name="qty[]" type="text" value="0" /><br />
<input name="qty[]" type="text" value="0" /><br />
<input name="sum" type="text" value="0" />
//Get a list of input fields to sum
var elements = document.getElementsByName("qty[]");
var element_array = Array.prototype.slice.call(elements);
//Assign the keyup event handler
for(var i=0; i < element_array.length; i++){
element_array[i].addEventListener("keyup", sum_values);
}
//Function to sum the values and assign it to the last input field
function sum_values(){
var sum = 0;
for(var i=0; i < element_array.length; i++){
sum += parseInt(element_array[i].value, 10);
}
document.getElementsByName("sum")[0].value = sum;
}
//获取要求和的输入字段列表
var elements=document.getElementsByName(“数量[]”);
var element_array=array.prototype.slice.call(元素);
//分配keyup事件处理程序
对于(var i=0;i
HTML
您可以使用$.each()对所有输入元素进行迭代并获取它们的值
JavaScript
$(function(){
var inputs = $("input");
inputs.blur(function(){
var total = 0;
$.each(inputs, function(input){
var num = parseInt(inputs[input].value);
total += (!isNaN(num))? num : 0;
});
$("#total").html(total)
HTML
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<p>
Total : <span id="total"></span>
</p>
总数:
工作示例您需要在动态添加的文本框上添加textbox change event
,并在更改用户输入的金额后添加该事件。首先,只允许使用数字创建文本框。。然后使用onkeyup属性调用一个计算总数的函数..感谢您的响应。我会试试看并更新评论。
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<p>
Total : <span id="total"></span>
</p>