Enable input when clicking the button inside the same row of a table

Question

Enable input when clicking the button inside the same row of a table

Navigation

#1 by (4 votes)

2

In the above table row I have two disabled inputs in columns vlcontrato and valor . I would like that when I click the alterar button these two inputs are enabled so that I can edit them.

Since they are on the same line I tried to use the siblings method but I only succeeded if the alterar button was within the same td as the input, but the button has to be in a td independent as in the image above!

How do I proceed to get this operation?!

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

jquery

asked by anonymous 02.05.2014 / 13:09

1 answer

Login with PHP + MYSQL + MD5 Use table or not

score 4 · Accepted Answer

Search for 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 move up the DOM and find this "parent", the closest <tr> , and then back down the DOM with .find() to find the element you are looking for:

$(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: link

jQuery documentation:

.closest ()

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

.find ()

Returns the descendants of each element passing in the selector filter.