jQuery sum on change keyup() 并在文本框中输出

Posted 2023-05-07

【中文标题】jQuery sum on change keyup() 并在文本框中输出

【英文标题】：jQuery sum on change keyup() and output in Text box

【发布时间】：2014-05-31 04:17:53

【问题描述】：

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

现在有一个输入，用户写了一些数字，然后他得到了总和，我试图自动得到总和。它的工作，但我需要在文本框中输出打印....此代码

<table>
    <tr>
        <td >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>
            <span id="sum"><input class="txt" type="text" name="txt" />
        </td>
        </span>
        </td>
    </tr>
</table>

$(document).ready(function() 
    //this calculates values automatically 
    calculateSum();

    $(".txt").live("keydown 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));

【参考方案1】：

使用 val() 设置文本框中的值，如下所示：

$("#sum input").val(sum.toFixed(2));

HTML：

<table>
    <tr>
        <td >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>
          <input type="text" id='sum1' name="input" />
        </td>
        </span>
        </td>
    </tr>
</table>

Jquery：

$(document).ready(function() 
    //this calculates values automatically 
    calculateSum();

    $(".txt").on("keydown 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");
        
    );

    $("input#sum1").val(sum.toFixed(2));

Here is working Fiddle DEMO

【讨论】：

在你的 calculateSum 函数最后一行简单地用这一行替换该行

我已经将此文本框用于 o/p

然后这样做：$("#sum input#input").val(sum.toFixed(2));

不客气，在小提琴中，您在页面中使用纯 javascript 进行操作，请记住包含最新的 jquery 文件以使其正常工作

我正在处理学生成绩单，但我遇到了一些其他问题，我一次填写了多张学生成绩单，一张学生成绩单计算得很好，但在第二个学生万一它不起作用记得我为第二个学生使用了相同的字段.....

【参考方案2】：

您可以在此处使用.val()：

$("#sum input").val(sum.toFixed(2));

代替：

$("#sum").html(sum.toFixed(2));