Question

我有一个简单的网页，其中包含一个显示用户和订阅数量的表格。

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

我有兴趣在用户订阅超过某个阈值时向表中添加一些突出显示。

例如，用户订阅＆gt; = 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代码中动态构建表格的html，所以您需要做的就是在符合指定条件的情况下添加一个类。

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; }

根据值突出显示单元格

2 个答案: