0

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

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

введите сюда описание изображения

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

2
  • Во-первых, "У меня есть таблица из 10 столбцов." А на скриншоте 9. Во-вторых, приведите код, хотя бы для одного объекта, чтобы знать с чем работать.
    – UModeL
    Commented 17 февр. 2021 в 6:53
  • Во-первых, от количества столбцов суть вопроса не изменится - завтра их может быть 25. Во-вторых, код вставлять не стал, потому что это обычна таблица из TR и TD, я не знаю что может быть в ней непонятнго
    – Ya Zh
    Commented 17 февр. 2021 в 7:20

1 ответ 1

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>

2
  • Спасибо! А то были страдания с классами и id...
    – Ya Zh
    Commented 17 февр. 2021 в 7:27
  • Незачто. Почитайте про jQuery, в нём очень удобно совершать навигацию по DOM-иерархии.
    – Denis I
    Commented 17 февр. 2021 в 7:31

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.