Javascript 表悬停边框颜色删除列线
我需要修复此表,以便悬停点上方的线隐藏在该列中。假设底部的中间框悬停,您将看到上面有3行。我需要那些台词不要出现Javascript 表悬停边框颜色删除列线,javascript,jquery,css,html-table,hover,Javascript,Jquery,Css,Html Table,Hover,我需要修复此表,以便悬停点上方的线隐藏在该列中。假设底部的中间框悬停,您将看到上面有3行。我需要那些台词不要出现 <table> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<script>
$('td').on('mouseover mouseout', function(){
$(this).prevAll().addBack()
.add($(this).parent().prevAll()
.children(':nth-child(' + ($(this).index() + 1) +
')')).toggleClass('hover');
});
</script>
table {
table-layout:fixed;
width:100%;
height:300px;
border-collapse:collapse;
}
td {
border:1px solid black;
}
.hover {
border-color:#ef7c32; border-width:2px;}
这将切换单元格列上的悬停类:
$('td').on('mouseover mouseout', function(){
var ix = $(this).parent().children().index(this);
$('table tr').children().eq(ix).toggleClass('hover');
});
第一条语句查找行中悬停单元格的索引。第二个选项切换所有行中该索引处单元格上的类
然后相应地设计:
.hover {
border-top: none;
border-bottom: none:
}
table tr:first-child .hover {
border-top: 1px solid black;
}
table tr:last-child .hover {
border-bottom: 1px solid black;
}