CODEWITHSUNDEEP
jquery
Mr. Spock
Mr. Spock

Reputation: 685

How do I find an specific textbox in the same row of a HTML table using jQuery?

I was hoping someone could help me here. It seems like it should be easy but I have not been able to find a solution.

I have a table that looks like this:

enter image description here

I've attached a a javascript function to the onclick event handler of the CheckBoxcontrols on the far left. Here is my javascript:

// Toggle row colors when a "N/A" checkbox is clicked.
function handleNAClick(cb) {
    if ($(cb).parent().parent().hasClass('silver')) {
        $(cb).parent().parent().removeClass('silver').addClass('white');
    }
    else {
        $(cb).parent().parent().removeClass('white').addClass('silver');
    }
}

This function toggles the row color when the CheckBox is clicked.

What I want to be able to do is also enable/disable the TextBox at the far right of the row if the CheckBox is clicked.

This table is dynamically generated and I don't know the ID of the controls ahead of time.

As you can see, I can already get a handle to the table row and change the color, but for some reason I can't figure out how to get a handle to the TextBox on that row.

From my research this should work for enabling the textbox in jQuery, but it doesn't:

$(cb).parent().parent().find('input').removeAttr('disabled');

I can't even change the text in the TextBox either:

$(cb).parent().parent().find('input').val('hotdog');

Seems like it should be simple so I'm inclined to think I'm "fat-fingering" it somehow.

Does anyone know of a better way to do what I want? What am I messing up?

Thank you!

Upvotes: 2

Views: 1324

Answers (2)

Rubens Mariuzzo
Rubens Mariuzzo

Reputation: 29241

Seems like you are using <textarea> instead of <input>, if this is the case the following will work:

$(cb).parents('tr:first').find('textarea').prop('disabled', false);

Since you want to modify the property of an element it has to be done via .prop() method, removing the attribute will no do anything.

Upvotes: 3

matty-d
matty-d

Reputation: 2651

For a quick and easy solution, it seems like you're on the right track. You simply have to get the right combination of dom traversal methods to find what you're looking for. Are you sure the cells on the far right of your table are simple inputs? It looks more like a textarea but I can't tell. In general, try and move away from this system though, what if later you need to add another column or a wrapper div? It might be worth your while to modify the dynamic generation code a little to help aid you.

Upvotes: 0

Related Questions