使用javascript有条件地格式化php输出

我希望有条件地（基于日期和时间）在

元素上应用Javascript不同的CSS样式，该元素包含使用Php从Mysql数据库输出的数据。php将事件列表生成到各种

中，其中

将根据相对于实际日期的日期/时间接收不同的颜色。（因此，如果事件日期/时间在未来，则颜色将为蓝色，如果在过去，则为灰色。） 我知道PHP解决方案将使用服务器的日期/时间，而javascript将使用浏览器的日期/时间，因此我选择javascript作为基于日期/时间的条件格式。 我还了解javascript需要等待整个页面加载，包括php查询的结果。 （我也知道我对javascript和php知之甚少。）

下面是我的html和php代码。此php查询前10个事件，并在引导表中按日期排序的列表中显示它们。

div#timecode

是我希望有条件地格式化的代码（此示例php代码不包含分页php代码，并返回数据库中的前10条记录）：

问题：javascript只格式化列表的第一个php结果。我认为

$（document）.ready（function（）

将允许它格式化所有10个列表项。 再次为我的问题格式错误感到抱歉-我与代码示例函数没有相互理解

对此有任何见解都将不胜感激

编辑： javascript现在看起来像这样

<script>
$(document).ready(function() {
$('#mytableid tr td:first-child').addClass('circle-disappear-blue');
var curtime = new Date(),
curday = curtime.getDate(),
curmonth = curtime.getMonth()+1;
if(curmonth == 7 && curday == 19)
$('#blue-condtional').addClass('circle-disappear-blue');
else
$('#blue-condtional').addClass('circle-disappear-grey');
});
</script>

$（文档）.ready（函数（）{
$（“#mytableid tr td:first child”）.addClass（'circle-define-blue'）；
var curtime=新日期（），
curday=curtime.getDate（），
curmonth=curtime.getMonth（）+1；
如果（curmonth==7&&curday==19）
$（“#蓝色条件”）.addClass（'circle-define-blue'）；
其他的
$（“#蓝色条件”）.addClass（'圆圈-消失-灰色'）；
});

例如，将id添加到表中

<table class="table" id="mytableid">

另一个选项是向要更改颜色的类型添加类，比如说“蓝色条件”

改变

<div id="timecode" padding="right:5px">

到

---

顺便说一句，使用内联样式不是好习惯。

ID必须是唯一的，也许你想使用类属性？为什么它要做其他事情？你有重复的ID，而且由于ID应该是唯一的，getElementById只会返回一个匹配的元素，通常是遇到的第一个。是的，谢谢，这是一个基本问题m、 谢谢，Robert。所以解决方案是使用

child

元素？请参见我的编辑：仍然适用于表的第一项。有几种方法可以实现它：一种是使用：first child，但类示例也很好

<script>
$(document).ready(function() {
$('#mytableid tr td:first-child').addClass('circle-disappear-blue');
var curtime = new Date(),
curday = curtime.getDate(),
curmonth = curtime.getMonth()+1;
if(curmonth == 7 && curday == 19)
$('#blue-condtional').addClass('circle-disappear-blue');
else
$('#blue-condtional').addClass('circle-disappear-grey');
});
</script>

<table class="table" id="mytableid">

$('#mytableid tr td:first-child').addClass('circle-disappear-blue');

if(curmonth == 7 && curday == 20) {
    $('.blue-condtional').addClass('circle-disappear-blue');
} else {
    $('.blue-condtional').addClass('circle-disappear-grey');
}

<div id="timecode" padding="right:5px">

<div class="blue-condtional">