Handling jQuery click events inside a table

Question

I have a table that contains several rows each containing one button and one textbox.

What is the simplest way to trigger alert with a textbox value?

Answer 1

You can bind a click handler to the button which traverses up the DOM to its containing <tr>, and then finds the textbox from there:

// Bind a click handler to all buttons in the table...
$('table :button').click(function () {

  var text = $(this)    // "this" is the button which was clicked
    .closest('tr')      // find the <tr> which contains it...
    .find(':text')      // find the text box within that <tr>...
    .val();             // and get its value

  alert(text);
});