在数据表标题单元格上悬停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来完成这项工作。但是我想把它放在＆＃34; Status＆＃34;标头悬停时的​​列标题。将代码放在表本身似乎删除了代码，那么我应该在其他地方添加它吗？

这jsfiddle显示了正在发生的事情。在此它显示div虽然它将它移出表div。理想情况下，我希望它仅在悬停特定表格标题时显示，但我很难过。

Answer 1

一种方法是在<tr>下放置第二个<thead>并使用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 2

像this：

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 3

结帐：使用CSS

注意：在使用此代码段之前需要注意，因为数据表排序本身就是点击＆＃34; th＆＃34;标签，使用一些CSS，我设法克服了这个问题，但它没有100％修复。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;