如何使用JavaScript从输入框中的值取总和？(How get total sum from i

2019-06-21 06:32发布

站内文章 / 前沿技术

22 0

我欲成王，谁敢阻挡

女 | 书童

私信

我不完美在Javascript ..我想显示无需刷新页面中输入数量框中输入一个名为总下一输入框的值的总和。谁能帮我弄明白..？

这里是JavaScript的

 <script type="text/javascript"> 
 var howmanytoadd = 2;
 var rows;

 function calc() {
     var tot = 0;
     for (var i = 0; i < rows.length; i++) {
         var linetot = 0;
         rows[i].getElementsByTagName('input')[howmanytoadd].value = linetot;
         tot += linetot;
     }
     document.getElementById('total').value = tot
 }
 onload = function () {
     rows = document.getElementById('tab').getElementById('qty1');
     for (var i = 0; i < rows.length; i++) {
         rows.getElementsByTagName('input')[i].onkeyup = calc;
     }
 }
</script>

这里是我的html代码：

Qty1 : <input type="text" name="qty1" id="qty"/><br>
Qty2 : <input type="text" name="qty2" id="qty"/><br>
Qty3 : <input type="text" name="qty3" id="qty"/><br>
Qty4 : <input type="text" name="qty4" id="qty"/><br>
Qty5 : <input type="text" name="qty5" id="qty"/><br>
Qty6 : <input type="text" name="qty6" id="qty"/><br>
Qty7 : <input type="text" name="qty7" id="qty"/><br>
Qty8 : <input type="text" name="qty8" id="qty"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>

这里是屏幕截图

Answer 1:

尝试：

Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty1"/><br>
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty3 : <input onblur="findTotal()" type="text" name="qty" id="qty3"/><br>
Qty4 : <input onblur="findTotal()" type="text" name="qty" id="qty4"/><br>
Qty5 : <input onblur="findTotal()" type="text" name="qty" id="qty5"/><br>
Qty6 : <input onblur="findTotal()" type="text" name="qty" id="qty6"/><br>
Qty7 : <input onblur="findTotal()" type="text" name="qty" id="qty7"/><br>
Qty8 : <input onblur="findTotal()" type="text" name="qty" id="qty8"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>


    <script type="text/javascript">
function findTotal(){
    var arr = document.getElementsByName('qty');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('total').value = tot;
}

    </script>

Answer 2:

 $(document).ready(function(){ //iterate through each textboxes and add keyup //handler to trigger sum event $(".txt").each(function() { $(this).keyup(function(){ calculateSum(); }); }); }); function calculateSum() { var sum = 0; //iterate through each textboxes and add the values $(".txt").each(function() { //add only if the value is number if(!isNaN(this.value) && this.value.length!=0) { sum += parseFloat(this.value); } }); //.toFixed() method will roundoff the final sum to 2 decimal places $("#sum").html(sum.toFixed(2)); }

 body { font-family: sans-serif; } #summation { font-size: 18px; font-weight: bold; color:#174C68; } .txt { background-color: #FEFFB0; font-weight: bold; text-align: right; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF"> <tr> <td width="40px">1</td> <td>Butter</td> <td><input class="txt" type="text" name="txt"/></td> </tr> <tr> <td>2</td> <td>Cheese</td> <td><input class="txt" type="text" name="txt"/></td> </tr> <tr> <td>3</td> <td>Eggs</td> <td><input class="txt" type="text" name="txt"/></td> </tr> <tr> <td>4</td> <td>Milk</td> <td><input class="txt" type="text" name="txt"/></td> </tr> <tr> <td>5</td> <td>Bread</td> <td><input class="txt" type="text" name="txt"/></td> </tr> <tr> <td>6</td> <td>Soap</td> <td><input class="txt" type="text" name="txt"/></td> </tr> <tr id="summation"> <td>&nbsp;</td> <td align="right">Sum :</td> <td align="center"><span id="sum">0</span></td> </tr> </table>

Answer 3:

使用Javascript：

window.sumInputs = function() {
    var inputs = document.getElementsByTagName('input'),
        result = document.getElementById('total'),
        sum = 0;            

    for(var i=0; i<inputs.length; i++) {
        var ip = inputs[i];

        if (ip.name && ip.name.indexOf("total") < 0) {
            sum += parseInt(ip.value) || 0;
        }

    }

    result.value = sum;
}

HTML：

Qty1 : <input type="text" name="qty1" id="qty"/><br>
Qty2 : <input type="text" name="qty2" id="qty"/><br>
Qty3 : <input type="text" name="qty3" id="qty"/><br>
Qty4 : <input type="text" name="qty4" id="qty"/><br>
Qty5 : <input type="text" name="qty5" id="qty"/><br>
Qty6 : <input type="text" name="qty6" id="qty"/><br
Qty7 : <input type="text" name="qty7" id="qty"/><br>
Qty8 : <input type="text" name="qty8" id="qty"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>

<a href="javascript:sumInputs()">Sum</a>

例如： http://jsfiddle.net/fRd9N/1/

Answer 4:

试试这个：

function add() 
{
  var sum = 0;
  var inputs = document.getElementsByTagName("input");
  for(i = 0; i <= inputs.length; i++) 
  {
   if( inputs[i].name == 'qty'+i) 
   {
     sum += parseInt(input[i].value);
   }
  }
  console.log(sum)

}

Answer 5:

我需要总结的span元素，所以我下面编辑AKHIL Sekharan的答案。

var arr = document.querySelectorAll('span[id^="score"]');
var total=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].innerHTML))
            total+= parseInt(arr[i].innerHTML);
    }
console.log(total)

您可以更改与其他元素连接的元素将引导您编辑工作。

https://www.w3.org/TR/css3-selectors/#attribute-substrings

Answer 6:

下面是使用什么AKHIL Sekharan提供但有一点变化的简单的解决方案。

var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i += 1) {
if(parseInt(inputs[i].value)){
        inputs[i].value = '';
       }
    }
document.getElementById('total').value = total;

Answer 7:

 $(document).ready(function(){ //iterate through each textboxes and add keyup //handler to trigger sum event $(".txt").each(function() { $(this).keyup(function(){ calculateSum(); }); }); }); function calculateSum() { var sum = 0; //iterate through each textboxes and add the values $(".txt").each(function() { //add only if the value is number if(!isNaN(this.value) && this.value.length!=0) { sum += parseFloat(this.value); } }); //.toFixed() method will roundoff the final sum to 2 decimal places $("#sum").html(sum.toFixed(2)); }

 body { font-family: sans-serif; } #summation { font-size: 18px; font-weight: bold; color:#174C68; } .txt { background-color: #FEFFB0; font-weight: bold; text-align: right; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF"> <tr> <td width="40px">1</td> <td>Butter</td> <td><input class="txt" type="text" name="txt"/></td> </tr> <tr> <td>2</td> <td>Cheese</td> <td><input class="txt" type="text" name="txt"/></td> </tr> <tr> <td>3</td> <td>Eggs</td> <td><input class="txt" type="text" name="txt"/></td> </tr> <tr> <td>4</td> <td>Milk</td> <td><input class="txt" type="text" name="txt"/></td> </tr> <tr> <td>5</td> <td>Bread</td> <td><input class="txt" type="text" name="txt"/></td> </tr> <tr> <td>6</td> <td>Soap</td> <td><input class="txt" type="text" name="txt"/></td> </tr> <tr id="summation"> <td>&nbsp;</td> <td align="right">Sum :</td> <td align="center"><span id="sum">0</span></td> </tr> </table>

文章来源: How get total sum from input box values using Javascript?