跟你说一下思路
首先是鼠标移入事件中:
利用jquery 先行遍历,获取行号,判断 行号在你的取值范围
满足条件后,再遍历当前 行(tr)的 下一级:单元格(td),使得每个单元格都改变背景色为你设置的颜色
然后是鼠标移出事件
利用jquery 先行遍历,获取行号,判断 行号在你的取值范围
满足条件后,再遍历当前 行(tr)的 下一级:单元格(td),使得每个单元格都改变背景色为初始颜色
--------------------------------------------------------------------------------------------------------
再来说怎么从固定的某列产生行变色效果:
直接是单元格的鼠标移入事件$("td").mousemove(function() {})
为什么呢,因为只有td 才有列属性
分页预览下的td
填报预览下的td
上面两种预览下的单元格获取列号不同,而填报预览是可以直接取到列的数字序号的,比较简单,你只需要获取 td 的col属性即可。这个比较简单。
上述方法获取到列号后,你可根据你要实现鼠标悬浮效果所在的列号,来判断 要不要执行行变色效果
假设你获取 到列号为:G
因为你现在是单元格(td)的鼠标移入事件,那你需要在满足条件的单元格中再获取 它的 row属性,
获取行号后,
再遍历他的父层级(tr)的全部子级(td),对tr下面的每一个td 执行改变背景色.
例如
$(this).parent('tr').children("td").each(function(){
$(this).css({"backgroud-color":'#c0c0c0'})
})