Итого значений в таблице HTML

Question

У меня есть таблица, выложенная так:

<table border="0">
    <tr>
        <td>10: <input type="text" size="1" autocomplete="off" name="10"/>&nbsp;&nbsp;</td>
        <td>12: <input type="text" size="1" autocomplete="off" name="12"/>&nbsp;&nbsp;</td>
        <td>14: <input type="text" size="1" autocomplete="off" name="14"/>&nbsp;&nbsp;</td>
        <td>16: <input type="text" size="1" autocomplete="off" name="16"/>&nbsp;&nbsp;</td>
        <td>18: <input type="text" size="1" autocomplete="off" name="18"/>&nbsp;&nbsp;</td>
        <td>20: <input type="text" size="1" autocomplete="off" name="20"/>&nbsp;&nbsp;</td>
        <td>22: <input type="text" size="1" autocomplete="off" name="22"/>&nbsp;&nbsp;</td>
    </tr>
</table>

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

Answer 1

Вам необходимо обработать событие change () для каждого входа:

$('input').change(function () {
    var that = $(this);

    that.siblings('div').text(parseInt(that.val(), 10) * 65);  
});

http://jsfiddle.net/XZNfS/

Answer 2

используя .on и .val() вы можете получить все значения ввода. Тогда вы можете делать все, что хотите

http://api.jquery.com/on/

http://api.jquery.com/val/

Answer 3

Добавьте это в конец вашего HTML: Subtotal: <span id="subtotal"></span>

Убедитесь, что jQuery загружен, а затем добавьте этот JavaScript ниже HTML:

<script type="text/javascript">
function compute_subtotal() {
    var total = 0;
    $("input[type=text]").each( function(i,e) {
        var value = $(e).val();
        if( parseInt(value) > 0 ) total += (65 * parseInt(value));
    });
    $("#subtotal").html( total );
}

jQuery(document).ready( function() {

    $("input[type=text]").change( function() { compute_subtotal(); } );
    $("input[type=text]").keyup( function() { compute_subtotal(); } );

});
</script>