Question

I am creating an html table dynamically.

$('#facilityModalTable').append('<tr><td></td><td></td><td></td><td></td><td></td></tr>');

There will be an <input type=Button value=Select /> on each row. I want to get all the row data in the clicked Select buttons row. I can think of a few options, but I’m not sure which to go with.

1. Create data-uniqueid attributes and assign to each column in a row.
2. Somehow use siblings() to solve the problem.
3. Other…

What do you recommend?

Answer 1

I don’t know if this is the simplest way to do it, but this is how I’d probably approach it just off the top of my head:

$("#facilityModalTable").append('<tr><td><input type="Button" value="Select"/></td><td>Hello</td><td>Red</td><td>12345</td><td>Buffalo, NY</td></tr>').find("input[type=button]").bind("click", function (e) {
    var $this = $(this),
    arrData = [];
    $this.parent().siblings().each(function (i, cell) {
        arrData[i] = $(cell).text();
    });
});

In this code I added the button and filled in some values just for testing purposes. I’m making some assumptions here so forgive me if something’s not quite aligned with what you’re trying to do.

I wouldn’t be surprised if there was a faster, more efficient way to do this. This is just off the top of my head in about a minute.

Cheers!