jquery - 如何在 Bootstrap 中的表之间获取数据？

Question

所以我有一个表格，我想通过折叠切换在两行之间插入一些东西。有可能吗？

所以基本上我想要表格两行之间的“Hello”。

代码回复: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>

Answer 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>

     

也许这对你有帮助？