Как можно суммировать несколько строк в таблице?

Question

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

Вот код JQuery:

$('.val1').keydown(function(e) { 
    var val1 = this.value; 
    var val2 = $('.val2').val(); 
    var total = val1 * val2; 
    $('.equal').val(total); 
}); 

Вот HTML код:

<table> 
    <thead> 
    <tr> 
     <th>Value 1</th> 
     <th>Value 2</th> 
     <th>Equal</th> 
    </tr> 
    </thead> 
    <tr> 
    <td><input class="val1" name="val1" type="text" value=""></td> 
    <td><input class="val2" name="val2" type="text" value=""></td> 
    <td><input class="equal" name="equal" type="text" value=""></td> 
    </tr> 
    <tr> 
    <td><input class="val1" name="val1" type="text" value=""></td> 
    <td><input class="val2" name="val2" type="text" value=""></td> 
    <td><input class="equal" name="equal" type="text" value=""></td> 
    </tr> 
    <tr> 
    <td><input class="val1" name="val1" type="text" value=""></td> 
    <td><input class="val2" name="val2" type="text" value=""></td> 
    <td><input class="equal" name="equal" type="text" value=""></td> 
    </tr> 
</table> 

Answer 1

Вы должны предназначаться все в контексте .val1 вы действуете на. Вот код, который вы хотите использовать:

$('.val1').keyup(function(e) { 
    var val1 = parseInt($(this).val()); 
    var val2 = parseInt($(this).parent().siblings('td').find('.val2').val()); 
    var total = val1 * val2; 
    $(this).parent().siblings('td').find('.equal').val(total); 
}); 

.keydown() было изменено на .keyup(), так как событие было стрельбы до того .val1 получил значение от нажатия клавиши. Поскольку вы умножаете два значения вместе, я превратил их обоих в числа с parseInt, так что .equal не имеет значения NaN.

Вы можете увидеть его в действии здесь: http://jsfiddle.net/3hqkR/1/

Answer 2

$('.val2') даст вам массив всех элементов с этим именем класса.

Поэтому var val2 = $('.val2').val(); никогда не будет работать.

Вы должны захватить первый элемент относительно того, где произошло событие:

var val2 = $(this).prev('tr').find('.val2').val();