私は現在フィルタリングdivを持っています：
<div class="filterOptions" id="FilterStatus">
<input type="checkbox" id="Status1" data-status="1"><label for="Status1">1</label>
<input type="checkbox" id="Status2" data-status="2"><label for="Status2">2</label>
<input type="checkbox" id="Status3" data-status="3"><label for="Status3">3</label>
<input type="checkbox" id="Status4" data-status="4"><label for="Status4">4</label>
</div>
それ自身のJavaScriptのビットでどれが仕事を完璧にやっていますか。ただし、ヘッダーにカーソルを合わせたときに、これを「ステータス」列ヘッダーのすぐ下に配置したいと思います。テーブル自体にコードを配置するとコードが削除されるようですが、他に追加する必要がある場所はありますか？
このjsfiddleは、何が起こっているのかを示しています。これでは、テーブルdivの外に移動しますが、divが表示されます。理想的には、特定のテーブルヘッダーにカーソルを合わせたときにのみ表示したいのですが、困惑しています。
var table = $('#myTable').DataTable({
autoWidth: false,
initComplete: function(settings, json) {
let api = new $.fn.dataTable.Api(settings);
let header = api.column(0).header();
let originalText = $(header).text();
let newText = originalText + `<div class="filterOptions" id="FilterStatus">
<input type="checkbox" id="Status1" data-status="1">
<label for="Status1">1</label>
<input type="checkbox" id="Status2" data-status="2">
<label for="Status2">2</label>
<input type="checkbox" id="Status3" data-status="3">
<label for="Status3">3</label>
<input type="checkbox" id="Status4" data-status="4">
<label for="Status4">4</label>
</div>`;
$(header).html(newText).attr("id", "hover")
}
});
このCSSで：
#FilterStatus {
display: none;
}
#hover:hover #FilterStatus {
display: block;
}
ただし、チェックボックスのアクションを変更する必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加