Выберите следующий <td> в таблице, используя jQuery

Question

Я работаю над приложением asp.net mvc 3. Я динамически строю таблицу с данными из базы данных. У меня есть определенный случай, когда третий столбец/ячейки из строки является выпадающий:

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

В этом случае четвертый столбец/ячейка остается пустой, а если пользователь выбирает 3 (не применимо) в четвертой ячейке должен будет отображаться текстовое поле, в котором пользователь может написать дополнительную информацию. У меня плохое знание в JS и JQuery, но я узнать, как получить выбранное значение из выпадающего списка:

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

Но теперь вместо предупреждения мне нужно проверить, если значение равно 3 (это далеко я может пойти один) и показать/скрыть или добавить/удалить текстовое поле из следующей ячейки или если мы поговорим в DOM.

Итак, как я могу перейти к следующему классу с классом = YesNoNotApplicable и как лучше всего справиться с этим текстовым полем - поместить его во время создания таблицы, а затем показать/скрыть это или иметь дело с ним во время выполнения и добавлять/удалять его и как я могу это сделать?

Answer 1

Если вы используете строго типизированную модель и html-помощники для своего вида, возможно, лучше создать элемент ввода при создании таблицы. Причина в том, что элементы, которые вы создадите с помощью jQuery, не будут привязаны к вашей модели.

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

Answer 2

В обратном вызове changethis будет ссылаться на элемент select. Таким образом, вы можете найти td, содержащий его closest, а затем следующий td через next (так как вы знаете следующая вещь является td, это таблица), как это:

var $nextTD = $(this).closest('td').next(); 

В более в общем случае, когда вы хотите сделать что-то подобное, но не в таблице, и родной брат, которого вы хотите найти, может быть более одного элемента, вы можете использовать nextAll("selector").first(). Но если вещь, которую вы хотите, является следующим элементом, и вы в этом уверены, вам не нужно nextAll.

Answer 3

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

Answer 4

var nextCell = $(this).closest('td').next();

И вы можете работать со следующим чел.