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

Я работаю над приложением 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 prespective.

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

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

Вы также можете использовать метод siblings() чтобы получить следующий td тег

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

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

#notapplicable{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
     <td></td>
     <td></td>
  </tr>
  <tr>
     <td><select name="YesNoNotApplicable" class="YesNoNotApplicable">
                            <option value="1">Yes</option>
                            <option value="2">No</option>
                            <option value="3">Not Applicable</option>
                        </select></td>
     <td><input type='text' id='notapplicable' /></td>
  </tr>
  
  
</table>