SUM Textbox Значение без Submit

Question

Я хочу, чтобы урегулировать сумму от общей стоимости в текстовом поле

<table> 
    <tr> 
     <td>Item 1</td> 
    <td>:</td> 
     <td><input type="text" id="txt1" value="100"/></td> 

https://jsfiddle.net/r77g5u4e/3/

Answer 1

Пожалуйста, попробуйте этот

СЦЕНАРИЙ:

<script> 
    $(document).ready(function ($) { 
     var a = 0; 
     $('table').find('input').each(function (index, element) { 
      a += parseInt($(this).val()); 
     }); 
     $('#total').html(a); 
    }); 
</script> 

HTML:

<table> 
    <tr> 
     <td>Item 1</td> 
    <td>:</td> 
     <td><input type="text" id="txt1" value="100"/></td> 
    </tr> 
    <tr> 
     <td>Item 2</td> 
    <td>:</td> 
     <td><input type="text" id="txt2" value="100"/></td> 
    </tr> 
    <tr> 
     <td>Item 3</td> 
    <td>:</td> 
    <td><input type="text" id="txt3" value="100"/></td> 
    </tr> 
    <tr> 
     <td>Item 4</td> 
    <td>:</td> 
     <td><input type="text" id="txt4" value="100"/></td> 
    </tr> 

    <tr> 
     <td>Total</td> 
    <td>:</td> 
     <td id="total"></td> 
    </tr> 
</table> 

Answer 2

Вы можете заполнить полный ваши требования, используя нижеуказанные код JavaScript:

var first = document.getElementById("txt1").value; 
    var second = document.getElementById("txt2").value; 
    var third = document.getElementById("txt3").value; 
    var fourth = document.getElementById("txt4").value; 
    var sum = parseInt(first) + parseInt(second) + parseInt(third) + parseInt(fourth); 
    document.getElementById('total').innerHTML = parseInt(sum); 

Вы можете увидеть result here

Answer 3

$(document).ready(function() { 
 
     custome_sum(); 
 
     $("#txt1, #txt2, #txt3, #txt4").change(function() { 
 
      custome_sum(); 
 
     }); 
 
    }); 
 
    function custome_sum(){ 
 
     var txt1 = $('#txt1').val(); 
 
     var txt2 = $('#txt2').val(); 
 
     var txt3 = $('#txt3').val(); 
 
     var txt4 = $('#txt4').val(); 
 
     var final_sum = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4); 
 
     $('#total').html(final_sum); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td>Item 1</td> 
 
     <td>:</td> 
 
     <td><input type="text" id="txt1" value="100"/></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Item 2</td> 
 
     <td>:</td> 
 
     <td><input type="text" id="txt2" value="100"/></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Item 3</td> 
 
     <td>:</td> 
 
     <td><input type="text" id="txt3" value="100"/></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Item 4</td> 
 
     <td>:</td> 
 
     <td><input type="text" id="txt4" value="100"/></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Total</td> 
 
     <td>:</td> 
 
     <td id="total"></td> 
 
    </tr> 
 
</table>

Пожалуйста, Try This,

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<table> 
    <tr> 
     <td>Item 1</td> 
     <td>:</td> 
     <td><input type="text" id="txt1" value="100"/></td> 
    </tr> 
    <tr> 
     <td>Item 2</td> 
     <td>:</td> 
     <td><input type="text" id="txt2" value="100"/></td> 
    </tr> 
    <tr> 
     <td>Item 3</td> 
     <td>:</td> 
     <td><input type="text" id="txt3" value="100"/></td> 
    </tr> 
    <tr> 
     <td>Item 4</td> 
     <td>:</td> 
     <td><input type="text" id="txt4" value="100"/></td> 
    </tr> 
    <tr> 
     <td>Total</td> 
     <td>:</td> 
     <td id="total"></td> 
    </tr> 
</table> 


<script> 
    $(document).ready(function() { 
     custome_sum(); 
     $("#txt1, #txt2, #txt3, #txt4").change(function() { 
      custome_sum(); 
     }); 
    }); 
    function custome_sum(){ 
     var txt1 = $('#txt1').val(); 
     var txt2 = $('#txt2').val(); 
     var txt3 = $('#txt3').val(); 
     var txt4 = $('#txt4').val(); 
     var final_sum = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4); 
     $('#total').html(final_sum); 
    } 
</script> 

Надежда U получили это :) Наслаждайтесь :)