Getting values from cells of a HTML dynamic table created with Jquery

Question

I have created a table that grows dynamically when the user enter some values using input and select fields. This is done by the append from jquery. This is the table id="customFields":

===============================================
|  ID   |  CLASS  |  PRICE  |  QTY  |  DELETE |
===============================================

This is the jQuery script that I use to append lines and add information to the table:

var index = 0;
$("#addPRICE").click(function(){
    index++;
    var id_value = $("#pack_price").val();
    var price_qty= $("#price_qty").val();

    //alert(id_value);
    $.ajax({
        type:"POST",
        url:"get_mt_pricelist.php",
        data:{mt_id: id_value},
        dataType:"json",
        success: function(data){
            if(data.success=="true"){
               $("#customFields").append('<tr id="'+index+'" valign="top"><td align="center"><input type="text" class="code1" id="customID" name="customID[]" value="'+id_value+'" size="3" readonly="readonly"/></td><td><input type="text" class="code2" id="customCLASSE" name="customCLASSE[]" value="'+data.multi_classe+'" readonly="readonly"/></td><td><input type="text" class="code3" id="customPRICE" name="customPRICE[]" value="'+data.multi_price+'" readonly="readonly"/></td><td align="center"><input type="text" class="code4" id="customQTY" name="customQTY[]" value="'+price_qty+'"/></td><td valign="middle" align="center"><a href="javascript:void(0);" class="remCF">Delete</a></td></tr>');
     });
});

Everything is working fine, the fields are added normally. I get some values from a MySQL database using the ajax and everything. I created a DELETE class called remCF, so when the user clicks on it the actual row will be removed. Also I have an index that gives to each an id number. I would like to catch the value in the cells PRICE and QTY and pop them in a alert msg when the user click on DELETE, then proceed with the remove().

This is what I did:

$("#customFields").on('click','.remCF',function(){
     alert($(".code3").val());
     alert($(".code4").val());
     $(this).parent().parent().remove();
});

The problem is: The alert shows only the value of the first row for any DELETE that I press. Even using CLASS instead of ID. How can I get the right value for the DELETE row that I am clicking?

Thanks

How your table looks like in HTML ?

The Alpha
– The Alpha

2014-06-01 01:35:06 +00:00
Commented Jun 1, 2014 at 1:35 — The Alpha
– The Alpha, Commented Jun 1, 2014 at 1:35

The Alpha · Accepted Answer · 2014-06-01 01:40:49Z

2

You may try this:

var row = $(this).closest('tr');
var customPRICE = row.find('.code3').val();
var customQTY = row.find('.code4').val();
row.remove();

answered Jun 1, 2014 at 1:40

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex 3a Over a year ago

Awesome! Your script works very sweet. Thanks @WereWolf - The Alpha

Collectives™ on Stack Overflow

Getting values from cells of a HTML dynamic table created with Jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related