根据值突出显示单元格

Question

我有一个带有 table 的简单网页，其中显示了用户和他们的订阅数量。

我正在使用 jquery/ajax 从我的 sql 服务器动态更新数据。

我有兴趣在用户订阅超过特定阈值时向 table 添加一些突出显示。

例如用户订阅>=100，则将单元格变为红色。

我怎样才能实现这一目标？

编辑：

 (function ricSubscriptions() {
    $.ajax({
        url : '/scripts/ricSubscriptions.php',
        type : 'POST',
        data : {},
        dataType:'json',
        success : function(data) {

            var output="";
            output += "<tr>";
            output += "<th>time</th>"
            output += "<th>username</th>" 
            output += "<th>rics</th>"
            output += "<th>exclusive rics</th>"

            for (var i in data) 
            {   
                output+="<tr>";
                output+="<td>" + data[i].time.date + "</td>" + "<td>" + data[i].username + "</td>" + "<td>" + data[i].rics + "</td>" + "<td>" + data[i].exclusive_rics +"</td>";
                output+="</tr>";
            }
            $('.ricSubscriptions').html(output);

            // Make the table header toggle and remember the state
            if(window.localStorage.getItem('ricSubscriptions') === 'true'){ 
                $('.ricSubscriptions th,.ricSubscriptions td').slideUp('1000'); 
            } 
            $('.ricSubscriptions caption').click(function(){
                if(window.localStorage.getItem('ricSubscriptions') === 'true'){   
                window.localStorage.setItem('ricSubscriptions', 'false');
            } else {
                window.localStorage.setItem('ricSubscriptions', 'true'); 
            } 

            $('.ricSubscriptions th,.ricSubscriptions td').slideToggle('1000'); });

        },
        error : function(request,error) {
            alert("Request: "+JSON.stringify(request));
        } ,
        dataType: "json",
        complete: setTimeout(function() {ricSubscriptions()}, 30000),           // Run this function every 30 seconds
        timeout: 8000
    })
})();

Answer 1

改变这个：

+ "<td>" + data[i].exclusive_rics +"</td>";

至：

+ "<td" + (data[i].exclusive_rics > 300 ? " class='highlight'" : "") + ">" + data[i].exclusive_rics +"</td>";

并将此添加到您的 CSS:

.highlight {
    background-color: red;
}

Answer 2

由于您是在 ajax 代码中即时构建 table 的 html，因此您需要做的就是添加一个 class 如果它满足您指定的标准。

for (var i in data) 
{   
    output+="<tr>";
    output+="<td"
    if (data.VARIABLEVALUE >=100) {
        output+=" class='colorRed'";
    }
    output+=">" + data[i].time.date + "</td>" + "<td>" + data[i].username + "</td>" + "<td>" + data[i].rics + "</td>" + "<td>" + data[i].exclusive_rics +"</td>";
    output+="</tr>";
}

然后在您的 css 文件中，添加

.colorRed { background: red; }

根据值突出显示单元格

Highlighting cell based on value

jquery

html-table

highlighting