js动态表格数据动态设置颜色

本文介绍了如何根据数据动态设置JavaScript表格中单元格的颜色。当数值超过特定阈值时,如2800w和2000w,单元格将显示为红色。内容涉及到数据查询、分页以及JavaScript的条件判断,旨在实现同一属性下不同名称和号码的数据颜色差异化展示。

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

首先需求是这样的:
831331048160200 - 北京 超过2800w显示红色
831331048160198 - 天津 不限制
831290048160214 - 广州 超过2000w显示红色
数据是同一属性的不同id 以及不同的名称:
所以查出来的数据为一个属性下面不同的值:
比如:
球 球的号码 不同 设置几号几号为什么颜色 几号几号为什么颜色,然后他们的名称也不同:可能是篮球 可能是羽毛球 但他们都是属于球 ,属于同一个属性下面 的不同名称 不同号码 通俗的列子就是这样;
接下来是代码:
jsp:

    <li style="text-align: center;">
                            <a href="#syhsicons" data-toggle="tab"><button class="btn-success" onclick="reload_cupMercodeselect();">刷新</button>
                            </a>
                            (<%=str_date %>)
                          </li>

js

function showCupHsTotalHome_manager(){

    var url = "transruning/getByHsTotalHome.do";
    var table = $("#upcupMercodeselect");
    //初始化表单
    table.DataTable({
        "autoWidth": false,
        "ordering": false,
        "searching": false,
        "iDisplayLength":200,
        "language": {
            "paginate": {
                "previous": "上一页",
                "next": "下一页",
                "last": "末页",
                "first": "首页"
            },
            "info": "显示 _START_ 至 _END_ 条,共 _TOTAL_ 条",
            "infoEmpty": "",
            "lengthMenu": "每页显示 _MENU_ 条",
            "search": "搜索(资源名称)",
            "processing": "正在加载数据...",
            "emptyTable": "没有数据"
        },
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url":url,
            "type":"post",
            "dataSrc": "data",
            "data" : function(d){
                var param = {};//新建参数对象
                param.start = d.start;//开始的序号
                param.length = d.length;//要取的数据长度
                param.value = d.search.value;//搜索
                return param;//自定义需要传递的参数。
            }
        },
        "columns": [
            {data: 'cup_mer_code'},
            {data: 'cup_mer_name'},
            {
                data: 'total_amt',
                render : function(data, type, row) {
                //得到后台数据
                    var s = parseFloat(data);
                    var cup_mer_code = row.cup_mer_code;
                    //做判断
                    if(cup_mer_code == '831331048160200'){
                        if(s <= 28000000){
                        //变颜色
                            return "<span class='label label-info'><font size='2'>"+data+"</font></span>";
                        }else{
                            return "<span class='label label-danger'><font size='2'>"+data+"</font></span>";
                        }
                    }else if(cup_mer_code == '831290048160214'){
                        if(s <= 20000000){
                            return "<span class='label label-info'><font size='2'>"+data+"</font></span>";
                        }else{
                            return "<span class='label label-danger'><font size='2'>"+data+"</font></span>";
                        }
                    }
                    return "<font size='2'>"+data+"</font>";
                }
            }
        ]
    });
    $("#upcupMercodeselect_wrapper div:first").remove();

}

control:

就是查询的分页方法 这个可以根据实际情况自己写;
重要的是sql:

<select id="getCupMercodeDataInfos" parameterType="Map" resultMap="tradeJnlsResult">
        select 
            cup_mer_code,
            CASE cup_mer_code
            when '号码' then '篮球'
            when '号码' then '排球'
            when '号码' then '网球'
            end cup_mer_name, 
            sum(total_amt) total_amt 
        from trade_jnls where 
        create_time BETWEEN #{startdate} AND #{enddate}
        and cup_channel_id = 2 and deduct_result = 2 
        and cup_mer_code in('号码','号码','号码')
        group by cup_mer_code
        <if test="start != null and length != null">
        LIMIT #{start},#{length}
        </if>
    </select>


计算多少条:


<select id="getCupMercodeDataTotal" parameterType="Map" resultType="int">
        select count(*) from (
            select 
                cup_mer_code,
                CASE cup_mer_code
                when '号码' then '篮球'
                when '号码' then '排球'
                when '号码' then '网球'
                end cup_mer_name, 
                sum(total_amt) total_amt 
            from trade_jnls where 
            create_time BETWEEN #{startdate} AND #{enddate}
            and cup_channel_id = 2 and deduct_result = 2 
            and cup_mer_code in('号码','号码','号码')
            group by cup_mer_code
        ) temp
    </select>







主要是思路以及js判断 以及sql

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值