Расчет с использованием 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 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" для каждого InputBox

Надеюсь, этот побуждающий импульс поможет вам немного. У вас еще долгий путь, мой молодой падаван ;-)