Сумма jQuery при изменении keyup() и вывод в текстовое поле

У меня есть следующий код jQuery для нахождения суммы всех строк таблицы, теперь он находит сумму при нажатии клавиши. Я хочу, чтобы сумма была уже рассчитана. Я хотел иметь скрытое поле, как ввод со значением, чтобы сумма вычислялась автоматически.

Теперь есть вход, пользователь пишет какое-то число, и чем он получает сумму, я пытаюсь получить сумму автоматически. это работает, но мне нужен вывод в текстовом поле.... для этого кода

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

jquery sum onkeyup
person user3503395    schedule 16.04.2014    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Используйте 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));
}

Вот работает DEMO Fiddle

person Ehsan Sajjad    schedule 16.04.2014
comment
в вашей последней строке функции calculateSum замените эту строку на эту просто - person Ehsan Sajjad; 16.04.2014
comment
‹input type=text id='input' name=input /› я использую это текстовое поле для o/p - person user3503395; 16.04.2014
comment
затем сделайте так: $(#sum input#input).val(sum.toFixed(2)); - person Ehsan Sajjad; 16.04.2014
comment
пожалуйста, и в скрипке вы делали это с чистым javascript на своей странице, не забудьте включить последний файл jquery, чтобы он работал - person Ehsan Sajjad; 16.04.2014
comment
я работаю над табелями успеваемости учащихся, в которых у меня возникла другая проблема, в моем случае я заполняю несколько табелей успеваемости учащихся одновременно, и в одной табели успеваемости учащихся рассчитать работу очень хорошо, но во втором случае студента это не работает, помните, что я использовал те же поля для второго ученика..... - person user3503395; 16.04.2014
comment
Если вы предоставите скрипку, я могу помочь и отметьте ее ответом, если ваша проблема решена. - person ; 16.04.2014
comment
Предоставьте скрипку, будет легко помочь в fiddlr - person Ehsan Sajjad; 16.04.2014

arrow_upward
1
arrow_downward

Вы можете использовать .val() здесь:

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

вместо:

$("#sum").html(sum.toFixed(2));
person Felix    schedule 16.04.2014