Wybierz następny <td> w tabeli, używając jQuery

Question

Pracuję nad aplikacją asp.net mvc 3. Buduję tabelę dynamicznie z danymi z bazy danych. Mam pewną sprawę, gdy trzecia kolumna/komórka z rzędu jest rozwijana:

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

W tym przypadku czwarta kolumna/komórka pozostaje pusta, a jeśli użytkownik wybierz 3 (nie dotyczy) w czwartym komórka powinna pokaż pole tekstowe, w którym użytkownik może wpisać dodatkowe informacje. Mam słabą wiedzę w JS i jQuery, więc mogę się dowiedzieć, jak uzyskać wybranej wartości z listy rozwijanej:

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

ale teraz zamiast wpisu muszę sprawdzić, czy wartość jest 3 (jest to daleko I można przejść samemu) i pokazać/ukryć lub dołączyć/usunąć pole tekstowe z następnej komórki lub jeśli porozmawiamy w domenie Prespective.

Jak mogę przejść do następnego z klasą = YesNoNotApplicable i jaki jest najlepszy sposób na zajęcie się tym polem tekstowym - aby umieścić go w trakcie tworzenia tabeli, a następnie pokazać/ukryć lub radzić sobie z nim w czasie wykonywania i dołączać/usuwać go i jak mogę to zrobić?

Answer 1

Jeśli używasz silnie wpisanego modelu i pomocników html dla swojego widoku, prawdopodobnie lepiej będzie utworzyć element wejściowy podczas tworzenia tabeli. Powodem jest to, że elementy, które tworzysz za pośrednictwem jQuery, nie będą związane z twoim modelem.

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

Answer 2

W ramach wywołania zwrotnego będzie się odwoływać do elementu . Więc można znaleźć td zawierające go closest, a potem następny td poprzez next (od wiesz następną rzeczą jest td, jest to tabela), podobnie jak to:

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

w bardziej W ogólnym przypadku, gdy chcesz zrobić coś podobnego, ale nie w tabeli, a rodzeństwo, którego chcesz znaleźć, może znajdować się w odległości większej niż jeden element, możesz użyć nextAll("selector").first(). Ale jeśli to, czego chcesz, to kolejny element i jesteś tego pewien, nie potrzebujesz 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();

I można następnie pracować z następnym CEL.