自动计算动态文本框值的总和 - Automatically calculate sum of the dynamic textbox values

我正在制作一个php，mysql网站用于计费...我想获取文本框中值的总和。可以根据用户要求添加行...但。。我尝试了大部分事情..但不是做对了....如何获取最后一列速率中所有文本框值的总和...我的意思是没有任何用户输入，例如按钮点击.....有人可以帮助我处理此代码.....

提前谢谢..

我为向表添加行而编写的代码。

         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 代码：

    <th width="17%"><label>S.No</label></th>
    <th width="17%">Product Id</th>
    <th width="17%">Product Name</th>
    <th width="17%">MRP</th>
    <th width="17%">Qty</th>
    <th width="18%">Rate</th>
    <th width="18%">Check</th>

</tr>

总

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" />

Javascript：

//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;
}

试试这个：

$('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

<?php 
for($i=1;$1<=5;$i++)
{
?>
<input type="text" id="rate<?php echo $i; ?>" class="rate" name="rate<?php echo $i; ?>">
<?php
}
?><input type="text" name="sum" name"sum">

jQuery

<script type="text/javascript">
$(document).ready(function()
{
for($j=1;$j<=5;$j++)
{
  $('#rate'+$j).val('0');
}
});
$sum=0;
$(".rate').keyup(function(){
for($j=1;$j<=5;$j++)
{
   $sum=$sum+$('#rate'+$j).val();
   alert($sum);
 }
 $(".sum").html('$sum');
 });
 </script>

您可以使用 $.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>

工作示例 http://jsfiddle.net/w0029xuz/