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

Question

我想在用户将值放入textfield但不能这样做时减去这些值。这是一个总和的例子，但我希望减去相同的内容：

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

这是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

您可以添加总值，并在每次插入新内容时减去。

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