Question

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

现在有一个输入，用户写了一些数字，而不是他得到的总和，我试图自动得到总和。这是有效的，但我需要在文本框中输出打印 ....这段代码

<table>
    <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>
            <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));
}

Answer 1

使用 val（）在文本框中设置值，如下所示：

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

<强> HTML

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

Answer 2

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

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

而不是：

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

jQuery总和更改keyup（）和文本框中的输出

2 个答案: