如何有效地使用 jQuery 来乘以动态渲染表的列

Question

I'm working on a pretty big table/form that is dynamically created depending on stock availability. The table has 5 fields: Code, Prod.Name, Amount, Price and SubTotal. The user is supposed to set a number in the Amount field and then there's a jQuery script that multiplies that amount for the price to display the SubTotal. In the table, a product looks like this:

<tr> 
    <td>Princess 01</td> 
    <td>Conjunto corpiño y cola less <strong>Talle 85</strong></td> 
    <td><input type="text" id="princess-lingerie-id-963" name="[princess-lingerie][id_963]" value=""></td> 
    <td>$<input type="text" id="price_princess-lingerie-id-963" value="99" readonly="readonly"/></td> 
    <td id="subTotal_princess-lingerie-id-963" name="subTotal"></td> 
</tr>

My problem is that I have many different products that belong to different product categories, so while this belongs to the "princess-lingerie" (don't laugh) category, a product from the "cosmetica" category looks like this:

<tr>    
  <td>D02/3</td> 
  <td>Magic Dual aroma Frutos Rojos</td> 
  <td><input type="text" id="cosmetica-stock-id-1008" name="[cosmetica-stock][id_1008]" value=""></td> 
  <td>$<input type="text" id="price_cosmetica-stock-id-1008" value="26" readonly="readonly"/></td> 

I have actually already created the little bit of logic which would work for only one field, but I don't know how to extend it to the whole table. Could anyone give me a hand with it? ...I'm a little bit overwhelmed and don't know where to start right now.

$(document).ready(function(){
$("#princess-lingerie-id-963").keyup(function() {
    var howMany = parseInt($("#princess-lingerie-id-963").val());
    var subTotal = parseInt($("#price_princess-lingerie-id-963").val()) * howMany;
    //assign subTotal to the td
    $("#subTotal_princess-lingerie-id-963").html(subTotal);
});
});

Answer 1

Shad is right to suggest adding useful classes. To handle the calculations in a sustainable way across a multi-row table, you'll also need a way to generically identify which row you're calculating on. I'm sure this could be greatly improved, but here's a basic example:

The jsfiddle demo is here .

// there are two cells where the 'id' has this pattern, but only one is selectable (the other is read-only)
// still, it would be better to give it a class if at all possible to avoid confusion
// and possible tampering by users
$("input[id*=-id-]").keyup(function() {

    var howMany = parseInt($(this).parent().next().find('input').val(), 10);
    var subTotal = parseInt($(this).val(), 10) * howMany;
    //assign subTotal to the td
    $(this).parent().next().next().html(subTotal);
});

EDIT:

Updated to include radix and condition for blank value:

http://jsfiddle.net/RzBeM/2/

$("input[id*=-id-]").keyup(function() {
    var howMany = parseInt($(this).parent().next().find('input').val(), 10);
    var subTotal = parseInt($(this).val(), 10) * howMany;
    if (isNaN(subTotal)) subTotal = 0;
    //assign subTotal to the td
    $(this).parent().next().next().html(subTotal);
});

Answer 2

First, I would start giving your inputs useful classes, like 'qty' and 'price', and then the final cell can have a class of 'subtotal'. That makes the next step possible:

jQuery('#TABLEID tr').each(function(i,E){
   var subT=parseInt(jQuery(E).find('.qty').val(),10) * parseFloat(jQuery(E).find('.price').val());
   jQuery(E).find('.subtotal').text('$' + subT.toFixed(2));
});

I use jQuery to iterate over each tr in the table, and run the necessary calculations.

The final solution could use a further tweaked version:

jQuery(function(){
 jQuery('.qty').keyup(function(){
    var E=jQuery(this).parents('tr').filter(':first');
    var subT=parseInt(E.find('.qty').val(),10) * parseFloat(E.find('.price').val());
    E.find('.subtotal').text('$' + subT.toFixed(2));
 });
});