Javascript：根據TD TITLE值更改TD顏色

Question

我有一個要求，可以根據標題屬性中的時間戳更改表格數據顏色。例如，從下面的值，

• 如果「部署」 <1小時TD背景顏色必須是紅色，其他
• 如果「部署」 < 24小時TD背景顏色必須是綠色的，否則
• 如果「部署在」< 1周bd顏色應顯示爲灰色。這樣的：

<tr> 
    <td title="Deployed on :Wed Mar 25 2015 10:00:00 UTC| check performed on: Wed Feb 14 2015 23:34:00 UTC ">Version 4.0</td> 
    <td title="Deployed on :Mon Feb 15 06:05:05 UTC 2016 |check performed on: Mon Feb 15 06:05:05 UTC 2016 ">version 8.3.2</td> 
    <td title="None">None</td> 
</tr> 

讓我知道，如果別人需要的任何東西。 僅供參考，我使用Django & bootstrap css。

非常感謝

編輯：日期格式是固定的：「負責：星期一2月15日6時05分05秒UTC 2016」

Answer 1

你一個嘗試這樣的事情，如果你使用的標題：

window.onload = function() { 
 
    var td = document.getElementsByTagName('td'); 
 
    for (var i = 0; i < td.length; i++) { 
 
    var title = td[i].getAttribute("title").split("|"); 
 
    var titleObj = {} 
 
    title.forEach(function(item) { 
 
     var o = item.split(':'); 
 
     var retObj = {}; 
 
     if (o.length > 1) 
 
     titleObj[o[0].trim()] = new Date(o[1]); 
 
    }); 
 

 
    if (titleObj["Deployed on"]) 
 
     td[i].className = titleObj["Deployed on"].getMonth() < 2 ? "red" : "blue"; 
 
    } 
 
}

.red { 
 
    background: red; 
 
    color: white; 
 
} 
 
.blue { 
 
    background: blue; 
 
    color: white; 
 
}

<table> 
 
    <tr> 
 
    <td title="Deployed on :Wed Mar 25 2015 10:00:00 UTC| check performed on: Wed Feb 14 2015 23:34:00 UTC ">Version 4.0</td> 
 
    <td title="Deployed on :Mon Feb 15 06:05:05 UTC 2016 |check performed on: Mon Feb 15 06:05:05 UTC 2016 ">version 8.3.2</td> 
 
    <td title="None">None</td> 
 
    </tr> 
 
</table>

@移動日期data的Gurvinder的建議。這是比較理想的和可擴展的方法

window.onload = function() { 
 
    var td = document.getElementsByTagName('td'); 
 
    for (var i = 0; i < td.length; i++) { 
 
    var deployEdOn = td[i].getAttribute("data-deployed-on")? new Date(td[i].getAttribute("data-deployed-on")):undefined; 
 
    if (deployEdOn) 
 
     td[i].className = deployEdOn.getMonth() < 2 ? "red" : "blue"; 
 
    } 
 
}

.red { 
 
    background: red; 
 
    color: white; 
 
} 
 
.blue { 
 
    background: blue; 
 
    color: white; 
 
}

<table> 
 
    <tr> 
 
    <td 
 
     title="Deployed on :Wed Mar 25 2015 10:00:00 UTC| check performed on: Wed Feb 14 2015 23:34:00 UTC " 
 
     data-deployed-on="Wed Mar 25 2015 10:00:00 UTC">Version 4.0</td> 
 
    <td 
 
     title="Deployed on :Mon Feb 15 06:05:05 UTC 2016 |check performed on: Mon Feb 15 06:05:05 UTC 2016 " 
 
     data-deployed-on="Mon Feb 15 06:05:05 UTC 2016">version 8.3.2</td> 
 
    <td 
 
     title="None">None</td> 
 
    </tr> 
 
</table>

Answer 2

感謝拉傑什& Gurvinder。終於在你的幫助下解決了這樣的問題

window.onload = function() { 
    var td = document.getElementsByTagName('td'); 
    for (var i = 0; i < td.length; i++) { 
     var deployed = td[i].getAttribute("title") 
     if (deployed){ 
     if (deployed.indexOf("Deployed on:") >= 0) 
     { 
      var title = td[i].getAttribute("title").split("|")[0]; 
       var titledate = new Date(title.split("Deployed on:")[1]); 
     var datem = titledate.getTime() 
     var d = new Date(); 
     var diff = (d.getTime() - datem) 

     if (diff < 3600000){ 
       td[i].className = "onehour"; 
       } 
     if (diff < 18000000 && diff > 3600000){ 
       td[i].className = "halfday"; 
       } 
     if (diff < 86400000 && diff > 18000000){ 
       td[i].className = "oneday"; 
       } 
     if (diff < 604800000 && diff > 86400000){ 
       td[i].className = "oneweek"; 
       } 
     } 
     } 
     } 
}