Question

我现在正在努力解决一些代码，但我无法解决它。我有一个纯HTML的表格。这个html文件每天发送给我，每天html文件中的日期都是更新。

它有一个表结构。货架上的数字，描述和产品到期的日期：

<table>
    <tr><td>1</td><td>coca cola</td><td>2014-08-17</td></tr>
    <tr><td>2</td><td>bread</td><td>2014-02-13</td></tr>
    <tr><td>3</td><td>apple</td><td>2014-01-20</td></tr>
    <tr><td>4</td><td>cookies</td><td>2014-04-03</td></tr>
</table>

现在我已经测试了几段代码，如果你想我可以在这里发布，但我希望尽可能保持我的问题干净，而不是用代码片充斥我的问题。

现在我想要的是：

过去的所有日期都会变成橙色
将在2周内到期的日期变为红色
其余的日期没有颜色

我最好的尝试，直到现在是这段代码：

<?php 

$date_to_compare = "2014/02/02";
$dateNow = new DateTime("now");
$dateCompare = new DateTime($date_to_compare);
$difference = $dateNow->diff($dateCompare);

//for debugging; %R gives you prefix (- or +); %a gives you days.
echo "Days in difference (from today until compare date): " . $difference->format('%R%a') . "<br />";

if ($difference->format('%R%a') < 0) {
    $highlight_css_class = "orange"; 
} elseif ($difference->format('%R%a') <= 14) {
    $highlight_css_class = "red";
} else {
    $highlight_css_class = "";
}
    ?>

在我的表格中添加td类

<td class="<?php echo $highlight_css_class; ?>">...</td>

CSS

<style type="text/css">
    .red { 
        color : #f00; 
    }
    .orange { 
        color : #ffa500; 
    }
</style>

但是这不起作用......所有日期都会变成红色并且变色......有人可以帮助我。我正试图解决这个问题4天了。

Answer 1

这个JS将从你的tr标签中挑选出每个第三个孩子，用破折号将日期分成一个数组，使用数组作为日期，计算出该日期与现在之间的时间差，然后应用你的颜色风格。

jsfiddle example

var parents = document.getElementsByTagName("tr")

for (var i = 0, ii = parents.length; i < ii; i++) {
    var parent = parents[i],
        children = parent.children

for (var j = 0, jj = children.length; j < jj; j++) {
    var elem = children[j]
    if (j % 3 === 2) {
        var dateElement = elem.innerHTML;
        var dateArray = dateElement.split("-");
        var prevTime = new Date(dateArray);
        var thisTime = new Date();
        var diff = prevTime.getTime() - thisTime.getTime();
        var days = 1000*60*60*24;
        var diffInDays = Math.ceil(diff / days);
        if (diffInDays < 0) {
            elem.style.color = "#ffa500";
        }
        else if (diffInDays <= 14) {
            elem.style.color = "#ff0000";
        }
    }
} }

Answer 2

试试这个:)请点击我需要积分。谢谢：）

$date_to_compare = "2014/02/08";
$dateNow = new DateTime("now");
$dateCompare = new DateTime($date_to_compare);
$difference = $dateNow->diff($dateCompare);

$highlight_css_class = '';

if ($difference->invert) 
    $highlight_css_class = 'orange';
elseif ($difference->days <= 14) 
    $highlight_css_class = 'red';
}
echo $highlight_css_class;
?>

突出显示过去和未来两周内到期的日期

2 个答案: