jQuery - Simple way to select a table row

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 da开发者_StackOverflow社区ta 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?

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!

$(this).closest('tr');

http://api.jquery.com/closest/

Unlike parents(), closest() travels up the DOM tree until it finds a match for the supplied selector. parents('tr') travels up to the document's root element, possibly selecting other table rows, in case of nested tables.

simple :

$(this).parents("tr:first").css('border','solid 1px red');

whenever a clicked item inside the TR - it goes u and search for its TR parent and then...