固定某几列,鼠标悬浮行变色

鼠标悬浮行变色.zip

填报报表里面,固定了某几列,鼠标悬浮行变色是从固定列那分段行变色。怎么实现整行变色。图片1.png在模板→模板web属性→填报页面属性里面添加了js(加载结束)

//鼠标经过  

$(".x-table tr").mousemove(function() {  

//所在行背景色:红色  

        $(this).css("background-color","yellow");  

});   

//鼠标离开  

$(".x-table tr").mouseout(function() {  

//所在行背景色:白色  

        $(this).css("background-color","white");  

});  

请大神帮忙解答一下追加问题:点击行,该行背景色变色。如图所示的能让客户ID的VINET单元个也变成黄色吗?image.png

FineReport yzm263093 发布于 2022-1-25 16:49 (编辑于 2022-1-26 14:35)
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共3回答
最佳回答
0
snrtuemcLv8专家互助
发布于2022-1-26 08:31
  • yzm263093 yzm263093(提问者) 大神,追加了问题,能给看看嘛?就是分组的时候点击行的时候行背景色变化。想让所在分组的单元格也变色。
    2022-01-26 14:37 
  • yzm263093 yzm263093(提问者) 问了一下fr的技术支持,分组实现不了。只能是列表。先无视问题了吧。
    2022-01-26 15:28 
最佳回答
0
luojian0323Lv7资深互助
发布于2022-1-26 08:23(编辑于 2022-1-26 09:01)

跟你说一下思路

首先是鼠标移入事件中:

利用jquery 先行遍历,获取行号,判断 行号在你的取值范围

满足条件后,再遍历当前 行(tr)的 下一级:单元格(td),使得每个单元格都改变背景色为你设置的颜色 

然后是鼠标移出事件

利用jquery 先行遍历,获取行号,判断 行号在你的取值范围

满足条件后,再遍历当前 行(tr)的 下一级:单元格(td),使得每个单元格都改变背景色为初始颜色 

--------------------------------------------------------------------------------------------------------

再来说怎么从固定的某列产生行变色效果:

直接是单元格的鼠标移入事件$("td").mousemove(function() {})

为什么呢,因为只有td 才有列属性image.png

分页预览下的td

image.png

填报预览下的td

image.png

上面两种预览下的单元格获取列号不同,而填报预览是可以直接取到列的数字序号的,比较简单,你只需要获取 td 的col属性即可。这个比较简单。

上述方法获取到列号后,你可根据你要实现鼠标悬浮效果所在的列号,来判断 要不要执行行变色效果

假设你获取 到列号为:G

因为你现在是单元格(td)的鼠标移入事件,那你需要在满足条件的单元格中再获取 它的 row属性,

获取行号后,

再遍历他的父层级(tr)的全部子级(td),对tr下面的每一个td 执行改变背景色.

例如 

$(this).parent('tr').children("td").each(function(){

        $(this).css({"backgroud-color":'#c0c0c0'})

})

  • yzm263093 yzm263093(提问者) 大神,感谢非常详尽的解答~ 追加上了代码还是没出来效果。不具备JS和Jquery的知识。不知道该怎么改呢。
    2022-01-26 10:32 
  • luojian0323 luojian0323 回复 yzm263093(提问者) 那就积累 以上回答也不能解决你的实际问题,我只是说了些重点。就算我给我写出来了。你稍微变化一下需要,代码又不一定能用了。所以可以先从简单js写起来。
    2022-01-26 10:36 
  • yzm263093 yzm263093(提问者) 回复 luojian0323 嗯嗯。感谢感谢~
    2022-01-26 14:36 
最佳回答
0
沉默的反补Lv6中级互助
发布于2022-1-26 08:44

现在的fr设计器填报表已经自带了编辑行变色了,开启就行了,无需使用JS实现

image.png

  • 5关注人数
  • 685浏览人数
  • 最后回答于:2022-1-26 14:35
    请选择关闭问题的原因
    确定 取消
    返回顶部