Enable input by clicking the button within the same row of a table

Question

In the table row above I have two inputs disabled in the columns vlcontrato and valor. I would like to click on the button alterar these two inputs were enabled for me to edit them.

Once they are on the same line I tried to use the siblings method but I only succeeded if the button alterar were within it td that the input, but the button has to stay in one td independent as in the image above!

How should I proceed to reach that operation?!

$('tr td .btn_alt').click(function(){   
    $(this).siblings('input[name=vlcontrato]').attr('readonly', false);
    $(this).siblings('input[name=vlcontrato]').focus(); 
});

Answer 1

Find the hierarchical element that is common to the elements you are looking for. It is probably the <tr>.

So you can use the .closest() to climb the DOM and find this "father", the <tr> and then back down in the DOM with .find() to find the element you seek:

$(this).closest('tr').find('input[name="vlcontrato"]').attr('readonly', false);

If you want to enable both inputs, then you can simplify and use:

$('tr td .btn_alt').click(function () {
    $(this).closest('tr').find('input').attr('readonly', false);
});

jsFiddle: http://jsfiddle.net/DuVyB/

---

Documentation jQuery:

.Closest()

Go up in the DOM and check each element for the indicated selector, including the.

.find()

Returns the descendants of each element that passes through the selector filter.