2022-04-19 帆软鼠标移入表格显示颜色代码_帆软柱状图鼠标悬停柱状图换颜色-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44190736/article/details/124270236

本文介绍如何在帆软报表中实现在鼠标移入表格时显示颜色的效果。通过绑定body的初始化后JS事件，调整字体大小、行高和加粗字体。当筛选条件变化导致效果失效时，需要在条件控件的编辑结束事件中重新应用代码。注意，参数面板的筛选条件变化不会触发此效果，因为会重新渲染body。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绑在body的初始化后js事件上。

setTimeout(function() {
        //选择时背景颜色变量  
        var oldColor = "rgb(255, 255, 255)";
        var newColor = "rgb(230, 247, 255)";

        $('.x-table td').hover(function() {
                if ($(this).attr("style").indexOf("background-color") == -1) {
                        $(this).css('background', newColor).siblings().css("background", newColor);
                }
        }, function() {
                if ($(this).attr("style").indexOf("background-color") == -1) {
                        $(this).css('background', oldColor).siblings().css("background", oldColor);
                }
        });
}, 1000);

改变字体大小，行高

setTimeout(function() {
        //选择时背景颜色变量  
        var oldColor = "rgb(255, 255, 255)";
        var newColor = "rgb(230, 247, 255)";

        $('.x-table td').hover(function() {
                if ($(this).attr("style").indexOf("background-color") == -1) {
                        $(this).css('background', newColor).siblings().css("background", newColor);
                        $(this).css("font-size", 16).siblings().css("font-size", 16);
                        $(this).css("height", 28).siblings().css("height", 28);
                }
        }, function() {
                if ($(this).attr("style").indexOf("background-color") == -1) {
                        $(this).css('background', oldColor).siblings().css("background", oldColor);
                        $(this).css("font-size", 12).siblings().css("font-size", 12);
                        $(this).css("height", 20).siblings().css("height", 20);
                        
                }
        });
}, 1000);

加粗字体

setTimeout(function() {
        //选择时背景颜色变量  
        var oldColor = "rgb(255, 255, 255)";
        var newColor = "rgb(200, 204, 255)";

        $('.x-table td').hover(function() {
                if ($(this).attr("style").indexOf("background-color") == -1) {
                        $(this).css('background', newColor).siblings().css("background", newColor);
                        $(this).css("font-weight", 700).siblings().css("font-weight", 700);

                }
        }, function() {
                if ($(this).attr("style").indexOf("background-color") == -1) {
                        $(this).css('background', oldColor).siblings().css("background", oldColor);
                        $(this).css("font-weight", 400).siblings().css("font-weight", 400);     
                }
        });
}, 1000);