在Bootstrap中,可以使用Table detailView和detailFilter来展示和过滤表格的详细信息。
要使用Table detailView,首先需要在表格中添加一个可展示详细信息的列。例如,可以在每一行的最后一列中添加一个“详情”按钮,点击该按钮时展示该行的详细信息。
<table class="table">
<thead>
<tr>
<th>#</th>
<th>名称</th>
<th>详情</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>产品A</td>
<td><button class="btn btn-primary" data-toggle="modal" data-target="#detailModal">详情</button></td>
</tr>
<tr>
<td>2</td>
<td>产品B</td>
<td><button class="btn btn-primary" data-toggle="modal" data-target="#detailModal">详情</button></td>
</tr>
</tbody>
</table>
然后,在页面的底部添加一个模态框,用于展示详细信息。
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="detailModalLabel">产品详情</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>产品详细信息...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
要使用Table detailFilter,可以在表格上方添加一个输入框,通过输入关键字来实现表格的过滤。
<input type="text" id="filterInput" class="form-control" placeholder="输入关键字进行过滤">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>名称</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>产品A</td>
</tr>
<tr>
<td>2</td>
<td>产品B</td>
</tr>
</tbody>
</table>
<script>
$(function() {
$('#filterInput').on('keyup', function() {
var value = $(this).val().toLowerCase();
$('table tbody tr').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
以上代码中,使用jQuery监听输入框的键盘事件,当输入框的值改变时,遍历表格的每一行,根据行中的文本内容是否包含输入框的值来决定是否显示该行。
希望以上回答对您有帮助!