CODEWITHSUNDEEP
javascriptjquery
sticky_elbows
sticky_elbows

Reputation: 1514

how to get a particular cell from a dynamically added row based on its id in jQuery

I have a table with the id line-creation-table which grows or shrinks dynamically. Each row in this table looks like this:

<tr>
    <td><input type="text" name="brand" /></td>

    <td><input type="text" name="itemRefNo" id="itemRefNo"/></td>

    <td> <input type="number" name="quantity" value="1"/></td>

    <td> <input type="text" name="unitPrice" /></td>

    <td><input type="date" name="deliveryDate" /></td>

    <td><input type="button" value="Show Previous Actions" id="showPreviousActions"/></td>

</tr>

these rows are added dynamically. Now when the showPreviousActions button is clicked I want to retrieve the value from itemRefNo cell from the row where the button is clicked.

I tried this:

$("#line-creation-table").on('click', 'input[id="showPreviousActions"]', function(event) {
    var itemRefNo = $(this).parent().find('input[id="itemRefNo"]').val();
}

and this:

var itemRefNo = $(event.target).closest('input[id="itemRefNo"]').val();

but neither worked. When I console log the itemRefNo variable I get undefined. How can I solve it? Thank you very much.

Upvotes: 0

Views: 278

Answers (3)

sticky_elbows
sticky_elbows

Reputation: 1514

Ok, a very stupid mistake on my side. When creating a row for this table dynamically, I forgot to change the code there so that in the newly created rows there would be an input with the id itemRefNo. The old code:

$('#line-creation-table').append("<tr>" +
                "<td><input type='text' name='brand' /></td>" +
                "<td><input type='text' name='itemRefNo' /></td>" +
                "<td> <input type='number' name='quantity' value='1'/></td>" +
                "<td> <input type='text' name='unitPrice' /></td>" +
                "<td><input type='date' name='deliveryDate' /></td>" +
                "<td><input type='button' value='Show Previous Actions' id='showPreviousActions'/></td>" +
                "<td><input type='button' value='Delete' id='deleteRowButton' /></td>" +
                "</tr>")

new code:

$('#line-creation-table').append("<tr>" +
                "<td><input type='text' name='brand' /></td>" +
                "<td><input type='text' name='itemRefNo' id='itemRefNo'/></td>" +
                "<td> <input type='number' name='quantity' value='1'/></td>" +
                "<td> <input type='text' name='unitPrice' /></td>" +
                "<td><input type='date' name='deliveryDate' /></td>" +
                "<td><input type='button' value='Show Previous Actions' id='showPreviousActions'/></td>" +
                "<td><input type='button' value='Delete' id='deleteRowButton' /></td>" +
                "</tr>")

So both of @freedomn-m 's suggestions work.

Upvotes: 0

Uttam Gupta
Uttam Gupta

Reputation: 518

you can use

$('#showPreviousActions').click(function () {
            var aa = $(this).closest('tr').find('#itemRefNo').val();
        });

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

This code:

$(this).parent()

takes the current item (this = the button) and gets its parent, which is the td of the button, so attempting to then find an input in an adjacent cell fails.

A quick fix would be to get the tds parent, the tr, giving:

$("#line-creation-table").on('click', 'input[id="showPreviousActions"]', function(event) {
    var itemRefNo = $(this).parent().parent()
                        .find('input[id="itemRefNo"]').val();
}

better would be to use closest() to find the button's row:

$("#line-creation-table").on('click', 'input[id="showPreviousActions"]', function(event) {
    var row = $(this).closest("tr");
    var itemRefNo = row.find('input[id="itemRefNo"]').val();
}

Where closest() is the same as calling .parent() recursively until it finds a matching node (ie, closest parent).

Upvotes: 2

Related Questions