将鼠标悬停在 table 上时显示 div 和信息不起作用
Showing div with info while hovering a table does not work
我有一个绘制 table 的 tal 模板,但是在悬停时显示单元格 header 的功能不起作用。
这是我的代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="container"><input class="form-control" id="multi_host_filter" type="text" placeholder="Filter"></div>
<div class="container" tal:repeat="machine_result item.items()">
<button class="btn btn-info btn-sm btn-block btn-expand" type="button" data-toggle="collapse" data-target="#${machine_result[0]}_div" aria-expanded="false" aria-controls="${machine_result[0]}_div" tal:content="machine_result[0]"/>
<div class="collapse container" id="${machine_result[0]}_div">
<table class="table table-hover table-sm table-responsive table-bordered">
<tr tal:repeat="tuple machine_result[1].get('return')">
<th tal:condition="repeat['tuple'].index==0" tal:repeat="data tuple.split(';;')" tal:content="data"/>
<td class="td-hover" tal:condition="repeat['tuple'].index!=0" tal:repeat="data tuple.split(';;')" tal:content="data"/>
</tr>
</table>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#multi_host_filter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("table tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
$("td").on({
mouseenter: function(e){
var $cell = $(this);
var headerVal = $cell.closest("table").find("tr > th").eq($cell.index()).html();
var paragraph = '<p>' + headerVal + '</p>';
$('#floating_div').html(paragraph);
$('#floating-div').stop(true);
$('#floating_div').css({left: e.pageX, top: e.pageY});
$('#floating_div').width(150);
$('#floating_div').css('z-index', 4000);
$('#floating_div').height(40);
},
mouseleave: function(e){
$('#floating_div').css('z-index', -4000);
$('#floating-div').css('display', 'none');
},
});
</script>
我已经试过了 $('table').hover(function(){//something}
, function(){//离开时的东西}) 但是当我离开时 div 没有隐藏 table
"#floating-div" 已经在 index.html 创建,我可以从这个脚本修改它
有什么想法吗?
在查看您的代码时,在大多数情况下,它似乎正是您想要完成的——table 的格式有点不稳定(打开和关闭 TH 和 TD <th>...</th>
和 <td>...</td>
——但我也不熟悉 tal 模板)。
但是将您的代码减少到最少并重用其中的大部分代码,我生成了以下解决方案。
唯一真正的编辑是我在 #floating_div
上添加了一个 mouseleave()
事件,在光标正下方填充 div 会导致光标混淆。它认为它位于 <td>
之上的地方现在突然位于 #floating_div
之上。因此,"leaving" <td>
不起作用。这是因为光标现在位于其他东西之上并且会离开它。
$("td").on({
mouseenter: function(e){
//console.log( 'in', this );
let output = $(this).closest("table").find("tr > th").eq($(this).index()).html();
$('#floating_div').html( output );
$('#floating_div').removeClass('hidden');
$('#floating_div').css({left: e.pageX, top: e.pageY});
},
mouseleave: function(e){
//console.log( 'out', this );
$('#floating_div').addClass('hidden');
},
});
$('#floating_div').mouseleave( function(){
$(this).addClass('hidden');
});
*{ margin: 0; padding: 0; font-family: Arial, sans-serif; }
table, td, th{ padding: 5px; border: solid 1px rgba( 0, 0, 0, 0.25); }
#floating_div{
position: absolute;
top: 0;
left: 0;
padding: 15px;
display: block;
background-color: rebeccapurple;
color: white;
pointer-events: none;
}
#floating_div.hidden{
display: none;
top: -1000px;
left: -1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
</table>
<div id="floating_div" class="hidden"></div>
我有一个绘制 table 的 tal 模板,但是在悬停时显示单元格 header 的功能不起作用。
这是我的代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="container"><input class="form-control" id="multi_host_filter" type="text" placeholder="Filter"></div>
<div class="container" tal:repeat="machine_result item.items()">
<button class="btn btn-info btn-sm btn-block btn-expand" type="button" data-toggle="collapse" data-target="#${machine_result[0]}_div" aria-expanded="false" aria-controls="${machine_result[0]}_div" tal:content="machine_result[0]"/>
<div class="collapse container" id="${machine_result[0]}_div">
<table class="table table-hover table-sm table-responsive table-bordered">
<tr tal:repeat="tuple machine_result[1].get('return')">
<th tal:condition="repeat['tuple'].index==0" tal:repeat="data tuple.split(';;')" tal:content="data"/>
<td class="td-hover" tal:condition="repeat['tuple'].index!=0" tal:repeat="data tuple.split(';;')" tal:content="data"/>
</tr>
</table>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#multi_host_filter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("table tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
$("td").on({
mouseenter: function(e){
var $cell = $(this);
var headerVal = $cell.closest("table").find("tr > th").eq($cell.index()).html();
var paragraph = '<p>' + headerVal + '</p>';
$('#floating_div').html(paragraph);
$('#floating-div').stop(true);
$('#floating_div').css({left: e.pageX, top: e.pageY});
$('#floating_div').width(150);
$('#floating_div').css('z-index', 4000);
$('#floating_div').height(40);
},
mouseleave: function(e){
$('#floating_div').css('z-index', -4000);
$('#floating-div').css('display', 'none');
},
});
</script>
我已经试过了 $('table').hover(function(){//something} , function(){//离开时的东西}) 但是当我离开时 div 没有隐藏 table
"#floating-div" 已经在 index.html 创建,我可以从这个脚本修改它 有什么想法吗?
在查看您的代码时,在大多数情况下,它似乎正是您想要完成的——table 的格式有点不稳定(打开和关闭 TH 和 TD <th>...</th>
和 <td>...</td>
——但我也不熟悉 tal 模板)。
但是将您的代码减少到最少并重用其中的大部分代码,我生成了以下解决方案。
唯一真正的编辑是我在 #floating_div
上添加了一个 mouseleave()
事件,在光标正下方填充 div 会导致光标混淆。它认为它位于 <td>
之上的地方现在突然位于 #floating_div
之上。因此,"leaving" <td>
不起作用。这是因为光标现在位于其他东西之上并且会离开它。
$("td").on({
mouseenter: function(e){
//console.log( 'in', this );
let output = $(this).closest("table").find("tr > th").eq($(this).index()).html();
$('#floating_div').html( output );
$('#floating_div').removeClass('hidden');
$('#floating_div').css({left: e.pageX, top: e.pageY});
},
mouseleave: function(e){
//console.log( 'out', this );
$('#floating_div').addClass('hidden');
},
});
$('#floating_div').mouseleave( function(){
$(this).addClass('hidden');
});
*{ margin: 0; padding: 0; font-family: Arial, sans-serif; }
table, td, th{ padding: 5px; border: solid 1px rgba( 0, 0, 0, 0.25); }
#floating_div{
position: absolute;
top: 0;
left: 0;
padding: 15px;
display: block;
background-color: rebeccapurple;
color: white;
pointer-events: none;
}
#floating_div.hidden{
display: none;
top: -1000px;
left: -1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
</table>
<div id="floating_div" class="hidden"></div>