Question

I’ve got a table with rows and a button to add rows to the table. I increment the id’s of the input fields using this code:

$("#add_row_e").click(function() {
    var row = $("#expenses tbody > tr:last"),
        newRow = row.clone(true);
    newRow.find("input").each(function() {
        var num = +(this.id.match(/\d+$/) || [0])[0] + 1;
        this.id = this.id.replace(/\d+$/, "") + num;
        this.name = this.id;
    });
    newRow.insertAfter(row);
    return false;
});

I then multiply the 2 inputs and output them to a div using this:

$('.multiplier').on('keyup', function() {
    $('#results').html("£" + parseInt($('#E_NONM').val()) * parseInt($('#E_CCNM').val()));
});

Is there any way I can get this to work for each new row that I add? I’d imagine it’d have to look at the id’s in the row and use that to multiply, however I don’t know how to do this.

Also, how do I get the above to output to a input box not a div?

Answer 1

Try this

$('.multiplier').on('keyup', function() {

   var $tr = $(this).closest('tr');
   var $non = $tr.find('[id*=E_NONM]').val();
   var $ccn = $tr.find('[id*=E_CCNM]').val();

   $tr.find('#results').val("£" + parseInt($non) * parseInt($ccn));
});

This is assuming #E_NONM and #E_CCNM are inside the current row in which .multiplier textbox is existent.