bblog
bblog copied to clipboard
Published
20 hours ago •
lishengzxc
lishengzxc
表格十字线聚焦效果
腾讯体育的 NBA 直播中的球员数据，会根据鼠标的移动，在鼠标hover那一项的上下左右方向生成十字线，可以让用户更方便的阅读表格。
效果像这样：
看了下腾讯体育该页面的鼠标移动时候，表格上 DOM 和其变化，如图：
他应该是根据鼠标移动的时候拿到的data-coord，根据它的值对应的横竖列的tr设置特殊的className，我觉得这样的做法，会比较依赖data-coord的生成，不过这个也不难，利用后端模板语言，或者前端各种 view 框架也并不难，就算是自己手写也不费事情，但是可不可以不依赖这个data-coord呢？
看下我的实现
Demo 预览：http://codepen.io/lishengzxc/pen/oLzPxa
1. hover的那个<td>高亮
td:hover {
background-color: red !important;
}
一个css搞定，主要后面的加的!important，这是为了防止td所在的tr的样式覆盖td。
2. hover的那行<tr>高亮
tr:hover {
background-color: yellow;
}
同样一个css搞定。
3. hover的那个td所在的那列高亮
这个需要利用的 JavaScript
table.addEventListener('mouseover', event => {
var trs = Array.from(event.target.parentNode.parentNode.children)
var index = [...event.target.parentNode.children].indexOf(event.target)
trs.forEach(i => Array.from(i.children).forEach(j => j.style.backgroundColor = null))
trs.forEach(k => k.children[index].style.backgroundColor = 'yellow')
}, false)
table.addEventListener('mouseleave', event => {
var trs = Array.from(event.target.children)
trs.forEach(i => Array.from(i.children).forEach(j => j.style.backgroundColor = null))
}, false)
其中在table是表的<tbody>，在其上面对<td>进行事件代理。然后：
- 获取到
<td>所在表格的所有的<tr> - 获取到
<td>所在<tr>中的序号index - 将该表格内的所有
<td>的高亮效果取消 - 将被
hover的<td>的所在列高亮，就是将每个<tr>中的第index个高亮
最后，在鼠标离开table的时候，清除所有高亮，具体的高亮<td>和行高亮因为hover的取消，自己没有了hover伪类而取消，列高亮需要通过JavaScript完成（将所有的<td>高亮取消）。
在具体实现中，需要注意的一个细节是mouseover和mouseleave这两个事件：
mouseover和mouseout对应分别是鼠标移动到具体 DOM 上和移出具体 DOM 上，会冒泡。mouseenter和mouseleave也对应分别是鼠标移动到具体 DOM 上和移出具体 DOM 上，不会冒泡。
因此，如果需要事件代理，就需要mouseover和mouseout，反之mouseenter和mouseleave。
上述代码仅是实现一个思路，还能很好的抽象，等业务中需要这么一个组件的话，我想我会抽象写出来的。
其实要是css有父选择器的话，就太好解决了
