iview 表格添加十字交叉hover效果
注：此處使用jQuery 方式實(shí)現(xiàn)
思路如下:
找到表格中當(dāng)前鼠標(biāo)經(jīng)過(guò)的td元素
添加鼠標(biāo)經(jīng)過(guò)和離開(kāi)事件，注意要使用mouseenter和mouseleave，mouseover事件糠聪，只要鼠標(biāo)在當(dāng)前范圍內(nèi)移動(dòng)會(huì)一直觸發(fā)事件靠胜，具體參見(jiàn)菜鳥(niǎo)教程等。
- mouseover 事件在鼠標(biāo)移動(dòng)到選取的元素及其子元素上時(shí)觸發(fā) 。
- mouseenter 事件只在鼠標(biāo)移動(dòng)到選取的元素上時(shí)觸發(fā)颖变。
找到父元素.ivu-table-row掌实，給當(dāng)前行添加樣式陪蜻，背景顏色等，鼠標(biāo)離開(kāi)事件則相反
找到每行tr的對(duì)應(yīng)位置的td 設(shè)置樣式
由于獲取表格數(shù)據(jù)時(shí)可能存在異步操作贱鼻，因此使用代理事件
image.png
image.png
具體代碼如下：
$('.ivu-table-tbody').delegate('.ivu-table-column-center', 'mouseenter', function () {
let index = $(this).index();
$(this).parents('.ivu-table-row').siblings().each(function () {
$($(this).children()[index]).addClass('XXX');
})
}).delegate('.ivu-table-column-center', 'mouseleave', function () {
let index = $(this).index();
$(this).parents('.ivu-table-row').siblings().each(function () {
$($(this).children()[index]).removeClass('XX');
})
})
