如何用单元格制作切换效果并实现背景色变换？

单元格A1 B1 C1

默认A1高亮 B1和C1 置灰

点击某个单元格时，某个单元格高亮，其他两个置灰

（因为样式特殊，无法用条件属性动态参数制作因为会有JS冲突）

麻烦问下用JS是否可以实现这个需求呢？

JS如何写呢？

FineReport 慧慧036103 发布于 2023-7-25 14:10

1min目标场景问卷

立即参与

回答问题关注问题

悬赏：3 F币 + 添加悬赏

提示：增加悬赏、完善问题、追问等操作，可使您的问题被置顶，并向所有关注者发送通知

共6回答

最佳回答

慧慧036103Lv5见习互助
发布于2023-7-26 16:03

试过了，暂时无解决方案。

1592Lv6高级互助
发布于2023-7-25 14:14

试试：JS实现隐藏决策报表组件-https://help.fanruan.com/finereport/doc-view-1736.html

笨方法，不知场景适不适用，三个报表块，通过显示隐藏实现

举报收起评论(1)

慧慧036103(提问者) 我是用的这个方法，两个按钮就没问题。三个就出现问题了。因为从原来的相互对应情况，多了四种切换的情况。所以想着要不就干脆在样式上用JS来写死。但是不知道怎么实现才好~

2023-07-25 14:20

snrtuemcLv8专家互助
发布于2023-7-25 14:15

js背景色变色就是

$("td[id^='A1-0']").css("background","red");

自己根据你的需求，直接改变背景色就可以

举报收起评论(4)

慧慧036103(提问者) 决策报表吗？初始化吗？

2023-07-25 14:18

snrtuemc 回复慧慧036103(提问者) 你在同一个报表块，没有新自适应插件，这个代码是支持的，这个你是报表块点击js里面写这个代码

2023-07-25 14:21

慧慧036103(提问者) 回复 snrtuemc 嗯，就是没有反应

2023-07-25 14:30

snrtuemc 回复慧慧036103(提问者) 你什么版本，我10.0.19.没有新自适应插件，在B1超链接，JavaScript中写这个代码，点击B1，A1单元格背景色可以变红色的啊

2023-07-25 14:32

690624Lv6见习互助
发布于2023-7-25 14:18

添加超链接，自己给自己传参
添加条件属性，判断参数。设置相应条件和展示样式

举报收起评论(1)

慧慧036103(提问者) 不好意思，这个需求无法用条件属性来实现，谢谢！

2023-07-25 14:20

congerLv6高级互助
发布于2023-7-25 14:25（编辑于 2023-7-25 18:35）

可以写好一个css属性，然后通过给按钮或的单元格绑定点击事件来判断当前class属性内容

若此时点击内容2单元格，判断自身class属性是否有active如果没有就增加且移除noactive的class

$("td[id^='A1']").addClass('active')

$("td[id^='B1']").addClass('noactive')

$("td[id^='C1']").addClass('noactive')

style

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

或者更简单的

setTimeout(function(){

var a = _g().getWidgetByName("REPORT0");

var b = _g().getWidgetByName("REPORT1");

var c = _g().getWidgetByName("REPORT9");

a.visible();

c.invisible();

b.invisible();

}, 50)

举报收起评论(2)

慧慧036103(提问者) 大神，有完整的案例参考吗？这个方法应该可行

2023-07-25 14:37

conger 回复慧慧036103(提问者) 随意写的，如果你想用稍微改一下就好了，没有示例，或者点我头像加我V有空了帮你写一下

2023-07-25 16:10

Flu100Lv4见习互助
发布于2023-7-26 08:56

_g().getWidgetByName("color_warning").setValue('red');

var colorIndex = _g().getWidgetByName("color_warning").getValue();

setTimeout(function(){

if(colorIndex=='red') {

_g().getWidgetByName("exceedLine").css('background','#f6f9ff');

_g().getWidgetByName("betweenLine").css('background','#FFFFFF');

_g().getWidgetByName("belowLine").css('background','#FFFFFF');

}

else if(colorIndex=='yellow') {

_g().getWidgetByName("exceedLine").css('background','#FFFFFF');

_g().getWidgetByName("betweenLine").css('background','#f6f9ff');

_g().getWidgetByName("belowLine").css('background','#FFFFFF');

}

else{

_g().getWidgetByName("exceedLine").css('background','#FFFFFF');

_g().getWidgetByName("betweenLine").css('background','#FFFFFF');

_g().getWidgetByName("belowLine").css('background','#f6f9ff');

}

}, 100);

color_warning是一个文本控件，用于设置值的！这个是用frm做的，exceedLine，betweenLine，belowLine是三个报表块！

举报收起评论(1)

慧慧036103(提问者) 好咧，我试试看，非常感谢~

2023-07-26 15:55

4关注人数

348浏览人数

最后回答于：2023-7-26 16:03

活动推荐更多

热门课程更多

请选择关闭问题的原因

确定取消

提问

悬赏者（1）

撤回悬赏（1）

添加悬赏

请选择关闭问题的原因