Рассчитать сумму каждой строки с помощью jQuery при изменении значения в текстовом поле

0

При активации текстового поля количество изменилось. Но sub total div не изменяет значение, только если я обновляю страницу.

Любая идея, как вычислить сумму каждой строки и изменить в subtotal div в jquery, пожалуйста.

Благодарю.

Изображение 174551Изображение 174551

  • 1
    где код?
  • 0
    вам нужно поделиться связанным HTML
Показать ещё 6 комментариев
Теги:
backbone.js

2 ответа

2
Лучший ответ

Назначьте класс, назначенный всем текстовым полям, которые вы хотите рассмотреть для промежуточного итога, и слушайте изменения на этих текстовых полях и вычисляйте промежуточные итоги по изменению. Вот jsfiddle для того же http://jsfiddle.net/ravikumaranantha/Sb6zS/3/

<table>
    <tr>
        <td>Product 1</td>
        <td>
            <input class="quantity" type="text" value="10" />
            <input class="price" type="hidden" value="20" />
        </td>
        <td>$20</td>
    </tr>
    <tr>
        <td>Product 1</td>
        <td>
            <input class="quantity" type="text" value="20" />
            <input class="price" type="hidden" value="40" />
        </td>
        <td>$40</td>
    </tr>
</table>
<div class="subtotal"></div>


$('.quantity').on('change', function(){

    var subtotal = 0;
    $('.quantity').each(function(){
        var $this = $(this);
        var quantity = parseInt($this.val());
        var price = parseFloat($this.siblings('.price').val())
        subtotal+=quantity*price;
    })
    $('.subtotal').text(subtotal);

})
$('.quantity').trigger('change')
Поделиться
  • 0
    $this.siblings не работает, я получил undefinded ошибку при его использовании.
  • 2
    Вы пропустили добавление скрытого поля со значением цены? <input class="price" type="hidden" value="40" /> в то же время, которое имеет количество? если вы добавили куда-то еще, измените селектор jQuery соответственно.
Показать ещё 4 комментария
1

я просто быстро напишу простой http://jsfiddle.net/player889/3PRZr/. Надеюсь, это может помочь вам

$(function() {
  $('#B').bind('keyup', function() {
    $('#b').text ($('#B').val() *6) ;
}).keyup(function(){
    $("#subtotal").text( $('#A').val() *5 + $('#B').val() *6);
});

$('#A').bind('keyup', function() {
    $('#a').text ($('#A').val() *5) ;
  }).keyup(function(){
    $("#subtotal").text( $('#A').val() *5 + $('#B').val() *6);
 });
});

A : <input type="text" id="A"/> x5 
<div id="a"></div>
B : <input type="text" id="B"/> x 6
<div id="b"></div>
sum: <div id="subtotal"></div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню