使用jQuery / JavaScript减去HTML文本框值

Question

I want to subtract the values once a user put the value in textfield but unable to do so. Here is an example of sum but I want it same for subtracting:

<table style="border-collapse:collapse;background-color:#E8DCFF" border="1" width="300px">
    <tbody>
        <tr>
            <td width="40px">1</td>
            <td>Butter</td>
            <td><input class="txt" name="txt" type="text"></td>
        </tr>            
        <tr>
            <td>2</td>
            <td>Eggs</td>
            <td><input class="txt" name="txt" type="text"></td>
        </tr>            
        <tr>
            <td>3</td>
            <td>Bread</td>
            <td><input class="txt" name="txt" type="text"></td>
        </tr>
        <tr>
            <td>4</td>
            <td>Soap</td>
            <td><input class="txt" name="txt" type="text"></td>
        </tr>
        <tr id="summation">
            <td> </td>
            <td align="right">Sum :</td>
            <td align="center"><span id="sum">0</span></td>
        </tr>
    </tbody>
</table>

Here is jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $(".txt").each(function(){
            $(this).keyup(function(){
                calculateSum();
            });
        });
    });
    function calculateSum(){
        var sum = 0;
        $(".txt").each(function(){
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
            }
        });
        $("#sum").html(sum.toFixed(2));
    }
</script>

Answer 1

You can add a total value, and substract every time you insert something new.

 $(document).ready(function(){ $("#sum").data('total', 600).html(600); // add total value of 600 $(".txt").each(function(){ $(this).keyup(function(){ calculateSum(); }); }); }); function calculateSum(){ var $sum = $("#sum"); var sum = parseInt($sum.data('total'), 10); // get total value $(".txt").each(function(){ if (!isNaN(this.value) && this.value.length != 0) { sum -= parseFloat(this.value); } }); $sum.html(sum.toFixed(2)); } 

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