【问题标题】:jQuery table sum change keyup()?jQuery表总和更改keyup()?
【发布时间】:2011-11-20 12:44:47
【问题描述】:

我有以下 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));
 }

【问题讨论】:

    标签: javascript jquery


    【解决方案1】:

    如果我理解正确,您确实想在用户写入输入值时对变化求和。这可以通过将您的 ready 函数更改为:

    $(document).ready(function() {
         //this calculates values automatically 
         calculateSum();
    
         $(".txt").live("keydown keyup", function() {
            calculateSum();
         });
    });
    

    Demo

    【讨论】:

    • 这正是我所需要的,非常感谢,愿力量与你同在
    【解决方案2】:

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

    $(文档).ready(函数() { //遍历每个文本框并添加keyup //触发sum事件的处理程序 变量总和 = 0; $(".txt").each(function() { sum += parseFloat($(this).val()); $("#sum").val(""); $("#sum").val(sum); }); });

    希望对你有用

    【讨论】:

    • 试过了,但它确实发送了工作,也许我搞砸了,但还是谢谢
    猜你喜欢
    • 1970-01-01
    • 2019-02-26
    • 1970-01-01
    • 2017-08-09
    • 2012-06-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多