Jquery показать вложенную таблицу при клике по tr

181

03 февраля 2020, 00:00

Имеется следующий макет

 <table>
    <tbody>                                     
       <tr class="lessons-row">
         <td class="text-center"> данные</td>   
       </tr>
       <table class="table-users">
         <tbody>                                                
          <tr>
           <td class="text-center">данные юзеря</td>
          </tr>
         </tbody>
        </table>
    </tbody>
</table>

Таблица class="table-users" вложена в другую таблицу и имеет свойство display:none. Как при клике по class="lessons-row" (строчка родительской таблицы) показать вложенную таблицу. Обязательно с помощью оператора this так как так строчек с таблицами может быть множество.

Пробую делать так , но это не работает

$(".lessons-row").on('click',function() {
            var table_users = $(this).next('.table-users');
      //Отображаем скрытый блок
            if (table_users.css('display') == 'none'){
        table_users.animate({height: 'show'}, 500);
      } else {
        table_users.animate({height: 'hide'}, 500);
      }
    });

Answer 1

У Вас невалидная разметка, и если бы Вы открыли отладчик, то увидели бы, что браузер отрисовал DOM не так, как Вам хотелось - по факту получаются две независимые таблицы, которые идут друг за другом:

Чтобы сделать вложенную таблицу, её надо поместить в ячейку следующей строки. Но тогда, во-первых, возникает вопрос, нужна ли Вам вообще вложенная таблица, если всё равно это будет просто строка родительской таблицы? А, во-вторых, скрывать целесообразнее не вложенную таблицу, а саму следующую строку. И тогда Ваш код будет работать:

$(".lessons-row").on('click',function() { 
  var table_users = $(this).next('.table-users'); 
  //Отображаем скрытый блок 
  if (table_users.css('display') == 'none'){ 
    table_users.animate({height: 'show'}, 500); 
  } else { 
    table_users.animate({height: 'hide'}, 500); 
  } 
});

.table-users { 
  display: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<table> 
    <tbody>                                      
       <tr class="lessons-row"> 
         <td class="text-center"> данные</td>    
       </tr> 
       <tr class="table-users"> 
         <td> 
         <table> 
           <tbody>                                                 
            <tr> 
             <td class="text-center">данные юзеря</td> 
            </tr> 
           </tbody> 
          </table> 
          </td> 
       </tr> 
    </tbody> 
</table>