在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監聽輸入框的鍵盤事件,當輸入框的值改變時,遍歷表格的每一行,根據行中的文本內容是否包含輸入框的值來決定是否顯示該行。
希望以上回答對您有幫助!