Javascript:根据 TD TITLE 值更改 TD 颜色

Javascript: Change TD color based on TD TITLE value

本文关键字：TD 颜色 TITLE 根据 Javascript      更新时间：2023-09-26

我需要根据标题属性中的时间戳更改表数据颜色。例如，从下面的值，

  • 如果 1 小时 TD BG 颜色<"部署于"必须为红色，否则
  • 如果 24 小时 TD BG 颜色<"部署于"必须为绿色，否则
  • 如果"部署于"<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 日 06：05：05 UTC 2016 ">

如果你

使用title，你可以尝试这样的事情：

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>

@Gurvinder建议将日期移至data。这是更理想和可扩展的方法

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>

谢谢 Rajesh & 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";
                }
        }
        }
        }
}
相关文章：