Select the next <td> in a table using jQuery

Question

I am working on an asp.net mvc 3 application. I am building table dynamically with a data from database. I have a certain case when the third column/cell from a row is a dropdown :

<select name="YesNoNotApplicable" class="YesNoNotApplicable">                             <option value="1">Yes</option>                             <option value="2">No</option>                             <option value="3">Not Applicable</option>                         </select> 

In this case the fourth column/cell stays empty and if the user select 3(Not Applicable) in the fourth cell should be shown a textbox where the user can write additional information. I have poor knowledge in JS and jQuery, however I find out how to get the selected value from a dropdown :

$(document).ready(function () {         $('.YesNoNotApplicable').change(function () {             alert($('.YesNoNotApplicable').val());         });     }); 

But now instead the alert I need to check if the value is 3(this is the far I can go by myself) and to show/hide or append/remove a textbox from the next cell or if we talk in a DOM prespective.

So how can I navigate to the next to the one with class=YesNoNotApplicable and what is the best way to deal with this text box - to put it in the while I'm creating the table and then to show/hide it or to deal with it during run time and append/remove it and how could I do that?

Answer 1

If you are using strongly typed model and html helpers for your view, it would probably better to create input element while creating the table. The reason is the elements you would create via jQuery won't be bound to your model.

$(document).ready(function () {    $('.YesNoNotApplicable').change(function () {        if($(this).val() === "3")          $(this).closest('td').next('td').find('input').show();    }); });