javascript - 如何在表格的每一行下放置其他内容?
问题描述
我用谷歌搜索了很多,但我找不到适合我的情况的东西。我有一个引导表,我想在其中单击我的行以显示主行的附加信息。
我找不到办法做到这一点。
我有这个代码:
<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>
<th scope="row">1</th>
<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>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
如果我尝试这个:
<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>
<th scope="row">1</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<div class="additionl-info">
<p>Some additional info for the first row...</p>
</div>
</tr>
</tbody>
</table>
然后我的桌子坏了。
我怎样才能做到这一点 - 点击显示我的每一行的附加信息?
解决方案
在当前一个跨所有列的 a<tr>
之后添加另一个,然后在其中放置另一个。colspan
<td>
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table>...</table>
</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
然后新表将出现在行之间。
推荐阅读
- android - 将角半径添加到六边形
- r - 在R中向上添加一行
- java - spring boot“Whitelabel 错误页面”没有可用的消息
- postgresql - 设置 Cygnus-PostgreSQL 以实现历史数据持久性
- google-chrome - 无法使用 PouchDB 将本地 IndexedDB 复制到远程 CouchDB
- java - SIMples Java Multiplex 聊天服务器
- javascript - 如何将当前分数相加,jquery,javascript
- apache - PHP 启动:无法在 codeigniter ubuntu 中加载动态库 'php_mysqli'
- c# - 复杂类型需要主键
- angular - 在Angular 6+中路由到静态html页面