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

Question

1. 我想有条件地(基于日期和时间)在 <div> 上使用 Javascript 应用不同的 CSS 样式包含 Php 从 Mysql 数据库输出的数据的元素。 php 将事件列表生成各种 <div> s，其中一个 <div>根据相对于实际日期的日期/时间，会收到不同的颜色。 (因此，如果事件日期/时间在未来，颜色将为蓝色，如果在过去，则为灰色。) 我知道 PHP 解决方案会使用服务器的日期/时间，而 javascript 会使用浏览器的日期/时间，所以我选择 javascript 作为基于日期/时间的条件格式。 我也明白 javascript 需要等到整个页面加载，包括 php 查询的结果。 (我也明白我对javascript和php知之甚少。)

2. 下面是我的 html 和 php 代码。此 php 查询前 10 个事件并将它们显示在 Bootstrap 表中按日期排序的列表中。 div #timecode是我想有条件格式化的(这个示例php代码不包含分页php代码，并从数据库中返回前10条记录):

   <div class="row">
   <div class="venuelista">
   <div class="col-sm-9 col-md-9 col-lg-9">
   <table class="table">
   

   <tbody>
   
   <?php 
       while ($row = mysql_fetch_assoc($rs_result)) {
       ?>
   <tr>
       <td class="col-md-7">
           <div id="timecode" padding="right:5px"><?php echo $row['esemeny_disp_mm_dd']; ?></div>
           <div class="eventListTitle"><?php echo $row['esemeny_cim']; ?><br><?php echo $row['esemeny_jelleg']; ?></div>
       </td>
       <td class="col-md-5">
           <div class="eventListTitle"><?php echo $row['esemeny_helyszin']; ?>
           </div>
       </td>
   </tr>
       <?php 
       };
       ?>
   </tbody>
   </table>
   
       </div>
   </div>
   

在 Mysql 数据库中，我有一个“事件日期”字段和一个单独的“事件时间”字段。

1. 这是我在网上找到的 javascript，也许在这个站点上，用于格式化 div #timecode基于它的日期/时间(这只是测试它是否适用于固定日期 - 它确实适用):

   <script>
   $(document).ready(function() {
   var curtime = new Date(),
   curday = curtime.getDate(),
   curmonth = curtime.getMonth()+1;
   if(curmonth == 7 && curday == 20)
   $('#timecode').addClass('circle-disappear-blue');
   else
   $('#timecode').addClass('circle-disappear-grey');
   });
   </script>
   

2. 问题: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>

Answer 1

例如将 id 添加到您的表中

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

然后使用合适的选择器

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

另一种选择是将类添加到您想要更改颜色的类型，比如“blue-condtional”

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">

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