根據值高亮顯示單元格

我有一個簡單的網頁，其中有一個顯示用戶和訂閱數量的表格。根據值高亮顯示單元格

我正在使用jquery/ajax動態更新我的sql服務器中的數據。

我有興趣在用戶訂閱高於某個閾值時向表中添加突出顯示。

例如，用戶訂閱> = 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 
    }) 
})();

來源

2015-06-26 Himanshu Gupta

在該更新表的代碼，使用'如果（值> = 100）'，以測試它，然後添加一類的元件。 – Barmar

如果您需要更多指定的建議，您需要顯示更新表的代碼。然後我們可以指出在哪裏添加這個。 – Barmar

對不起@Barmar。我已經添加了代碼。 –

更改此：

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

到：

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

這添加到您的CSS：

.highlight { 
    background-color: red; 
}

來源

2015-06-26 20:01:18 Barmar

非常感謝你！像魅力一樣工作，這比我想象的要簡單得多！ –

我嘗試在類中添加另一個屬性，使字體顏色變爲白色，以便通過添加顏色使其在紅色頂部更明顯：#FFFFFF;但它不起作用。任何想法爲什麼？ –

不知道，它在這裏工作：http://jsfiddle.net/barmar/xf829L6s/ – Barmar

由於您在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; }

來源

2015-06-26 20:01:53 indubitablee

根據值高亮顯示單元格

回答

相關問題