jQuery表总和更改keyup()?

时间:2011-11-20 12:44:47

标签: javascript jquery

我有以下jQuery代码用于查找所有表行的总和,现在它在keyup上找到总和。我希望已经计算了总和。我希望有一个隐藏字段,比如带有值的输入,因此总和会自动计算。

现在有一个输入,用户写了一些数字,而不是他得到的总和,我试图自动得到总和。该数字已经存在于用户不会写任何内容的表格中。

HTML:

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

jQuery的:

 $(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);
           $(this).css("background-color", "#FEFFB0");
        }
        else if (this.value.length != 0){
           $(this).css("background-color", "red");
        }
    });
    $("#sum").html(sum.toFixed(2));
 }

2 个答案:

答案 0 :(得分:2)

如果我理解正确,您确实希望在用户写入输入值时总结更改。这可以通过将您的就绪功能更改为:

来实现
$(document).ready(function() {
     //this calculates values automatically 
     calculateSum();

     $(".txt").live("keydown keyup", function() {
        calculateSum();
     });
});

Demo

答案 1 :(得分:0)

如果在用户输入任何内容之前这些数字已经在输入字段中,您可以找到总和:

$(document).ready(function() {
     //iterate through each textboxes and add keyup
     //handler to trigger sum event
     var sum = 0;
     $(".txt").each(function() {
       sum += parseFloat($(this).val());
       $("#sum").val("");
       $("#sum").val(sum);
     });
 });

希望它适合你