Расчет с использованием jquery onkeypress

Question

У меня есть этот тип упражнений в JQuery.Перейдите сюда http://jsfiddle.net/LAntL/3/

Для Item 1, если я добавлю #no количества Size 7, в текстовом поле должно отображаться multiplied by Item 1's Price, а результат должен отображаться в текстовом поле Item 1's Ext.тогда, если я сделаю то же самое для size 8.5 of Item 1, он должен выполнить то же самое.

Но у Ext будет (Price x Size 7 Qty) + (Price x Size 8.5 Qty)

То же самое произойдет для Item 2.И вместе с этим Total quantity and Total price будет обновляться для события keypress каждого текстового поля.

Я новичок в jquery и получил это упражнение на убийство.Пожалуйста, помогите кому-нибудь.

Заранее спасибо.

Answer 1

Я бы посоветовал вам назначить некоторые классы вашим полям, чтобы jQuery мог легко их найти:

"lineQty"   - add this class to all the qty fields
"lineTotal" - add this class to all the line total fields
"linePrice" - I think you can see where I'm going with this
"lineExt"   - add to all ext fields

Тогда следующая функция .keyup будет обновлять все строки автоматически.

$(document).ready(function() {

    $(".lineQty").keyup(function() {
       // 'this' is the field the user is typing in
       // so find the tr that it belongs to
       var $row = $(this).closest("tr"),
           total = 0,
           // get the price for the current row:
           price = $row.find(".linePrice").val();

        // loop through every qty field for the current row and add
        // the entered value to the total, using unary plus to convert
        // to a number, and a default of 0 if non-numeric data is entered
        $row.find(".lineQty").each(function() {
            total += +this.value || 0;
        });

        // set the total for the current row
        $row.find(".lineTotal").val(total);

        // set the price for the current row
        $row.find(".lineExt").val(total * price);

        // now add up the grand totals
        var grandTotal = 0,
            grandPrice = 0;
         $(".lineTotal").each(function() {
           grandTotal += +this.value || 0;
        });
        $(".lineExt").each(function() {
            grandPrice += +this.value || 0;
        });
        $("[name='data[totalQuantity]']").val(grandTotal);
        $("[name='data[totalPrice]']").val(grandPrice);
    }); 

});

Рабочая демонстрация: http://jsfiddle.net/LAntL/5/ (работает только в первой строке, потому что меня не беспокоит назначение классов всем вашим полям - выпотребуется добавить классы, о которых я говорю выше, к каждому полю, как я сделал для первой строки).

Answer 2

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

Прежде всего, вы должны пометить таблицы, которые содержат элементы, class="item".Теперь вы можете написать селектор в jQuery, который получает каждый элемент отдельно.Затем вы должны отметить все ячейки (<td>), которые имеют специальную функцию.Всего, Цена, Диск и Доп.Ваша таблица должна выглядеть так:

<table class="item">
  <tr>
    <td>...</td>

    <td class="total">...</td>
    <td class="price">...</td>
    <td class="disc">...</td>
    <td class="ext">...</td>
  </tr>
</table>

Теперь вы можете написать селектор для всех полей ввода внутри таблицы с классом "item".

$('.item input').change(function(){});

Внутри этой функции вы можете обрабатывать вычисления.Сначала я бы порекомендовал получить предмет:

$('.item input').change(function(){
   var item = $(this).closest('table.item');
   var totalInput = $(item).find('.total input');
   var priceInput = $(item).price('.price input');
   // ...

   var allWriteableInputs = $(item).find('input[readonly!="readonly"]');

   // do the calculation
   var sum = 0;
   $(allWriteableInputs).each(function(i, input){
       sum += $(input).val();
   });
   $(totalInput).val(sum);
});

Если вы идете этим путем, вам не нужно:

1. onkeypress="return isNumberKey(event);" и
2. id="product1Total" для каждого поля ввода

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