将 div 悬停在数据表标题单元格上时

Question

我目前有一个过滤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。 理想情况下，我希望它仅在将鼠标悬停在特定表标题上时显示，但我被难住了。

Answer 1

像这样：

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;
}

不过，您需要更改复选框的操作！

Answer 2

一种方法是在<thead>下放置第二个<tr>，并使用jQuery添加一个hover事件，如下所示：

$('.status-header').hover(function(){
  $('.filterOptions').css('display','inline');
}, function(){
  $('.filterOptions').css('display','none');
})
var table = $('#myTable').DataTable({autoWidth: false});

.filterOptions {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.css" rel="stylesheet" />
<table id="myTable" class="display">
    <thead>
        <tr>
            <th class="status-header">Status
            </th>
            <th>Col 1</th>
            <th>Col 2</th>
        </tr>
        <tr class="status-header">
            <td colspan="3" class="">
                <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>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Status 1</td>
            <td>Row 1 Data</td>
            <td>Row 1 Data</td>
        </tr>
        <tr>
            <td>Status 2</td>
            <td>Row 2 Data</td>
            <td>Row 2 Data</td>
        </tr>
    </tbody>
</table>

Answer 3

查看这个：使用CSS

注意：在使用此代码段之前，您需要小心，因为数据表在单击"th"标签时会自行排序，使用一些 CSS 我已经设法克服了这个问题，但它不是 100% 修复的。

var table = $('#myTable').DataTable({autoWidth: false});

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
ul li {
	position: relative;
}
ul li ul {
	display: none;
	position: absolute;
	top: 100%;
	background-color: rgba(0,0,0,.8);
	color: #fff;
	width: 100%;
	padding: 10px;
}
ul li:hover ul {
	display: block;
}
ul li li {
	display: block;
	clear: both;
	
}
ul li ul input[type="checkbox"] {
	cursor: not-allowed;
	display: block;
	float: left;
	margin: 5px 10px 0 0;
}
ul li ul label {
	width: 100%;
	float: left;
	display: block;
	cursor: pointer;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.css" rel="stylesheet"/>
<table id="myTable" class="display">
			<thead>
				<tr>
          <th>
						<ul>
							<li>
								<a href="#">Status</a>
								<ul>
									<li><label for="Status1"><input type="checkbox" id="Status1" data-status="1">1</label></li>
									<li><label for="Status2"><input type="checkbox" id="Status2" data-status="2">2</label></li>
									<li><label for="Status3"><input type="checkbox" id="Status3" data-status="3">3</label></li>
									<li><label for="Status4"><input type="checkbox" id="Status4" data-status="4">4</label></li>
								</ul>
							</li>
						</ul>
					</th>
					<th>Col 1</th>
					<th>Col 2</th>
				</tr>
			</thead>
			<tbody>
				<tr>
          <td>Status 1</td>
					<td>Row 1 Data</td>
					<td>Row 1 Data</td>
				</tr>
        <tr>
          <td>Status 2</td>
					<td>Row 2 Data</td>
					<td>Row 2 Data</td>
				</tr>
      </tbody>
</table>