Как заставить jQuery отображать следующий ближайший в таблице и присоединять функцию jquery к классу для нескольких выпадающих списков

ProgramBox

Как заставить jQuery отображать следующий ближайший в таблице и присоединять функцию jquery к классу для нескольких выпадающих списков

Post author:admin
Запись опубликована:31 августа, 2022
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Во-первых, извинения

Справка… У меня заморозка мозга. Я достаточно опытный скрипач jQuery, и обычно я могу собрать воедино то, что мне нужно, из документов API / примеров / существующих вопросов SO, но, похоже, на этот раз я не могу с этим справиться.

Надеюсь, я не слишком много проголосовал за этот неловкий вопрос.

Настройка сцены

В настоящее время у меня есть таблица, в которой всего 1 и, по сути, неограниченное количество возможных строк. Что мне нужно сделать, так это для каждой <tr> строки иметь <tr> под ней другую, значение которой по умолчанию display: none; равно . Пока все хорошо.

Пример текущей таблицы - перед любым из того, что я опишу ниже!

В конце каждой строки находится выпадающее окно выбора с несколькими параметрами, как указано выше.

С чем мне нужна помощь…

Чего я хочу добиться, так это прикрепить обработчик jQuery к этим выпадающим спискам, и, если выбрано значение ‘Partial Accept’, я хочу показать ( .show() ) скрытое <tr> , поскольку оно будет содержать несколько дополнительных полей ввода, чтобы определить, сколько из них принимается, и почему остальные были отклонены (например, ‘»следовать» или «поврежден» и так далее).

Мой вопрос в том, каков наилучший способ добиться этого динамически? Я понял, насколько это связано .next() с чем-то по линии, если я присоединю обработчик jQuery к классу, а все выпадающие списки будут принадлежать этому классу? Но я не могу понять, как объединить все это вместе.

Я ценю, что в этом вопросе нет кода — мне было интересно, сжалится ли какая-нибудь добрая душа над этим изношенным программистом и приведет пример того, как вы этого добьетесь, учитывая приведенное выше описание и скриншот?

Заранее благодарю всех вас за ваши идеи. ~~Lee

Ответ №1:

Из того, что я понял из вопроса — вы хотите переключить значение next row of parent tr , если выпадающее значение равно Something .

Попробуйте это —

 $(".dropdownClass").change(function() {
    if($(this).val() == "Something") {
        $(this).closest("tr").next("tr").show();
    } else {
        $(this).closest("tr").next("tr").hide();
    }
});

Непроверенный, но вы поняли смысл…

Редактировать: изменено parent("tr") на closest("tr")

1. Я могу что-то сделать с этим и комментарием Джона. Спасибо, что нашли время ответить на глупый вопрос… Я действительно ценю это.

2. отсутствует заключительная кавычка в первой строке

3. кроме того, должно быть closest вместо parent . Скрипка, над которой я работал, когда вы ответили: jsfiddle.net/49HEb

4. Спасибо @CupawnTae. Да, так и должно быть closest , parent проверяет только один уровень вверх.

Ответ №2:

Не уверен, что это то, о чем вы говорите, но просто быстро разобрался с этим и нашел решение с помощью .change() :

 <table style="border: 1px solid black;" id="table">
  <tbody>
    <tr style="border: 1px solid black;">
      <th style="border: 1px solid black;">Hi!</th>
    </tr>
    <tr style="border: 1px solid black;">
      <td style="border: 1px solid black;">Hello!</td>
    </tr>
   <tr style="border: 1px solid black; display: table-row;">
     <td style="border: 1px solid black;">Missed</td>
   </tr>
 </tbody>
</table>
<select id="hello">
  <option>Hi!</option>
  <option>Hello!</option>
</select>
<script>
var hider = $("#table > tbody > tr:nth-child(3)");
$("#hello").change(function() {
    if (this.value === "Hello!") hider.show();
    else hider.hide();
});
</script>

Метки: Как заставить jQuery отображать следующий ближайший в таблице и присоединять функцию jquery к классу для нескольких выпадающих списков