Live Calculation per row

Question

I have a table that has several cells inside it one of it is quantity and the other is the unit price now I am having problem with calculating the subtotal for each row (blur). I don't know if I am heading on the right track.

<div class="widget-body" style="padding: 10px 0 0;">
    <table class="table table-primary table-bordered" id="tableaux">
        <thead>
            <tr>
                <th>Repair Type</th>
                <th>Detail Part Name</th>
                <th>Quantity</th>
                <th>Unit Price</th>
                <th>Subtotal</th>
                <th>Remove</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <select style="width: auto;" id="repairtype_id1" name="repairtype_id1" class="repairtype">
                        <option value="1">Single</option>
                        <option value="2">Parts</option>
                        <option value="3">Enhancement</option>
                    </select>
                </td>
                <td><input type="text" name="part_name1" id="part_name1" class="part_name" /></td>
                <td><input type="text" name="qty1" id="qty1" style="width: 50px;" class="qty" /></td>
                <td><input type="text" name="unit_price1" id="unit_price1" style="width: 100px;" class="price" /></td>
                <td class="subtotal"><input type="text" class="subtot" id="subtot1" style="width: 100px;" /></td>
                <td>&nbsp;&nbsp;&nbsp;&#x2716;</td>
            </tr>       
        </tbody>
    </table>
</div> <?php echo br()?>

    <button type="submit" class="btn btn-icon btn-primary glyphicons circle_ok" id="saveRepair"><i></i>Record Repair</button>
</form>

    <button class="btn btn-icon btn-primary glyphicons magic" id="addAnother"><i></i>Add Another Item</button>

function addTableRow(table)
    {
        var $tr = $(table).find("tbody tr:last").clone();
        $tr.find("input,select").attr("name", function(){
            var parts = this.id.match(/(\D+)(\d+)$/);

            return parts[1] + ++parts[2];
        }).attr("id", function(){
            var parts = this.id.match(/(\D+)(\d+)$/);
            return parts[1] + ++parts[2];
    });
    $(table).find("tbody tr:last").after($tr);
  };

$('#addAnother').on( 'click', function () {
        addTableRow($("table"));

        return false;
    });

$('table').live('input.subtot', 'blur', function(){
            var row = $(this).closest('tr');
            $(this).val(
                    $('.qty', row).val()*
                    $('.price', row).val()
            );
        });

Here's the current fiddle.

http://jsfiddle.net/XC3w4/

Answer 1

Here's what you're looking for:

$(document).on("change", ".price", function() {
    var units = this.value;
    var quantity = $(this).parent().prev().children("input").val();
    var subtotal = Number(units) * Number(quantity);

    $(this).parent().next().children("input").val(subtotal);
});

Here's the updated fiddle: http://jsfiddle.net/XC3w4/1/

Note: You will have to change your addNewRow method, as it clones the previous row, including the values in the inputs!