表格悬停边框颜色删除列线
Posted
技术标签:
【中文标题】表格悬停边框颜色删除列线【英文标题】:Table Hover Border Color Remove column lines 【发布时间】:2015-04-12 11:58:52 【问题描述】:我需要修复此表,以便悬停点上方的线隐藏在该列中。假设底部中间的框悬停在上面,您将在其上方看到 3 行。我需要这些台词不要出现。
<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;
【问题讨论】:
【参考方案1】:这会在一列单元格上切换悬停类:
$('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;
【讨论】:
以上是关于表格悬停边框颜色删除列线的主要内容,如果未能解决你的问题,请参考以下文章