Как реализовать дополнительный блок к строкам таблицы?

Question

После долгих запросов в гугл начинаю думать, что моя идея бредовая, поэтому спрашиваю тут.

У меня есть таблица из 10 столбцов. Таблица берет данные из БД. Мне нужно, чтобы к каждой строке еще дополнительно подгружалась информация, которая не помещается в основную таблицу. ДЛя меня это выглядело так

То есть в БД есть некий объект и у него есть куча параметров. Основные параметры я вывожу в таблицу, а дополнитльные мне тоже нужно как-то вывести. Сначала была идея реализовать это выдвижным блоком по клику на строку таблицы, но подобных решений в поиске не было. Затем была идея с модальными окнами, но это крайне неудобно. Может кто-то уже сталкивался с подобным? Почти все решения используют id элементов, но у меня их могут быть сотни, поэтому данное решение не подходит.

Answer 1

По клику на кнопочку. Стили дорисуете? Тут они чисто от балды.

   $('.more-button').on('click',function(){
     $(this).parent('tr').siblings('.more-block').slideToggle();
   });

   .mytable{
  width:100%;
   }
   .mytable tr{
  display:flex;
  flex-direction:row;
   }
   .mytable td{
  display:block;
  border:1px solid #ccc;
  color:#444;
  font-family: sans-serif;
  font-size: 1rem;
  padding: 2px 4px;
  width:20%;
   }
   .more-button{
  background-color: #00ffc8;
  color:#fff;
  font-weight: bold;
  cursor: pointer;
   }
   .more-block{
  display:none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="mytable">
   <tr class="main-row">
  <td>Запись 1</td>
  <td>Запись 2</td>
  <td>Запись 3</td>
  <td>Запись 4</td>
  <td class="more-button">Подробнее</td>

   </tr>
   <tr class="more-block">
  <td>Доп. Запись 1</td>
  <td>Доп. Запись 2</td>
  <td>Доп. Запись 3</td>
  <td>Доп. Запись 4</td>
  <td>Доп. Запись 5</td>
  <td>Доп. Запись 6</td>
  <td>Доп. Запись 7</td>
  <td>Доп. Запись 8</td>
  <td>Доп. Запись 9</td>
  <td>Доп. Запись 10</td>
  <td>Доп. Запись 11</td>
  <td>Доп. Запись 12</td>
   </tr>
</table>
<table class="mytable">
   <tr class="main-row">
  <td>Запись 1</td>
  <td>Запись 2</td>
  <td>Запись 3</td>
  <td>Запись 4</td>
  <td class="more-button">Подробнее</td>

   </tr>
   <tr class="more-block">
  <td>Доп. Запись 1</td>
  <td>Доп. Запись 2</td>
  <td>Доп. Запись 3</td>
  <td>Доп. Запись 4</td>
  <td>Доп. Запись 5</td>
  <td>Доп. Запись 6</td>
  <td>Доп. Запись 7</td>
  <td>Доп. Запись 8</td>
  <td>Доп. Запись 9</td>
  <td>Доп. Запись 10</td>
  <td>Доп. Запись 11</td>
  <td>Доп. Запись 12</td>
   </tr>
</table>

БЛОГ НА HUSL

Как реализовать дополнительный блок к строкам таблицы?

Ответы (1 шт):