Как мне получить данные между таблицами в Bootstrap?

Итак, у меня есть таблица, и я хочу вставить что-нибудь между двумя строками с помощью переключателя сворачивания. Возможно ли, если да, то как?

В общем, я хочу, чтобы «Привет» было между двумя строками таблицы.

Codeply: https://www.codeply.com/go/DKAi7ZLu6B

HTML

<link rel = "stylesheet" href = "//use.fontawesome.com/releases/v5.4.1/css/all.css" integrity = "sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin = "anonymous">

<table class = "table">
<thead>
<tr>
  <th scope = "col">#</th>
  <th scope = "col">First</th>
  <th scope = "col">Last</th>
  <th scope = "col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
  <td>
    <a href = "#" data-toggle = "collapse" data-target = "#AccountDetails"><i class = "fas fa-angle-right"></i></a>
    </td>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  </tr>
  <tr>
  <th scope = "row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
 </tr>
 </tbody>
 </table>

      <div class = "collapse" id = "AccountDetails">Hello </div>

jquery html css twitter-bootstrap

25.11.2018 00:44

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

131

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

$('a[data-toggle = "collapse"]').click(function(){
  $('.insert-here').toggle();;
});

.insert-here {
  display: none;
}

<link rel = "stylesheet" href = "//use.fontawesome.com/releases/v5.4.1/css/all.css" integrity = "sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin = "anonymous">
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"></script>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous">
<table class = "table">
<thead>
<tr>
  <th scope = "col">#</th>
  <th scope = "col">First</th>
  <th class = "insert-here" scope = "col">Hello</th>
  <th scope = "col">Last</th>
  <th scope = "col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
  <td>
    <a href = "#" data-toggle = "collapse" data-target = "#AccountDetails"><i class = "fas fa-angle-right"></i></a>
    </td>
  <td>Mark</td>
  <td class = "insert-here"></td>
  <td>Otto</td>
  <td>@mdo</td>
  </tr>
  <tr>
  <th scope = "row">2</th>
  <td>Jacob</td>
  <td class = "insert-here"></td>
  <td>Thornton</td>
  <td>@fat</td>
 </tr>
 </tbody>
 </table>

Может это тебе поможет?

Вот эта проблема. Не знаю, сможете ли вы помочь. Поскольку я использую структуру DIV, я не могу использовать DataTables, и если я хочу ее использовать, мне нужно удалить или изменить структуру DIV. Есть ли способ обхода DataTables?

— 26.11.2018 01:18

Нашел вот это: настройка "dom": stackoverflow.com/questions/51377563/…

— 26.11.2018 09:17

25.11.2018 01:25