Bootstrap 表 td 基於值的顏色變化

Question

 <table data-toggle="table" data-pagination="true" data-search="true" data-show-columns="true" data-show-pagination-switch="true" data-show-refresh="true" data-key-events="true" data-show-toggle="true" data-resizable="true" data-cookie="true" data-cookie-id-table="saveId" data-show-export="true" data-click-to-select="true" data-toolbar="#toolbar"> <thead> <tr> <th>Name</th> <th>Birthday</th> <th>Address</th> </tr> </thead> <tbody> <?php foreach($people as $person) {?> <tr> <td><?php echo $person["name"]; ?></td> <td id="birthday"><?=$person["birthday"]?></td> <td><?php echo $person["address"]; ?></td> </tr> <?php }?> </tbody> </table>

我想使用 jquery 更改生日 td 中的文本顏色。

如果生日在一周內，則文本顏色為綠色。

如果通過，則其文本顏色為紅色。

如何在生日 td 中獲得價值？

Answer 1

這取決於您的日期格式。 這只是每頁一個生日嗎？ 因為我建議您在 ID 上使用 class 以使其更靈活。 無論如何，您可以執行以下操作。

 $(document).ready(function(){ //Get the birthday var birthday = $('#birthday').text(); //Convert it to Date var dateBirthday = new Date(birthday); //Get today to compare var today = new Date(); //Get rid of the hour from today today.setHours(0,0,0,0) // To calculate the time difference of two dates var Difference_In_Time = dateBirthday.getTime() - today.getTime(); // To calculate the no. of days between two dates var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24); //Check if 7 days left AND the date is not past if( Difference_In_Days < 7 && Difference_In_Days > 0 ){ $('#birthday').addClass('one-week-or-less'); }else{ $('#birthday').addClass('more-than-one-week-or-past'); } });

 .one-week-or-less{ color:green; }.more-than-one-week-or-past{ color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table data-toggle="table" data-pagination="true" data-search="true" data-show-columns="true" data-show-pagination-switch="true" data-show-refresh="true" data-key-events="true" data-show-toggle="true" data-resizable="true" data-cookie="true" data-cookie-id-table="saveId" data-show-export="true" data-click-to-select="true" data-toolbar="#toolbar"> <thead> <tr> <th>Name</th> <th>Birthday</th> <th>Address</th> </tr> </thead> <tbody> <tr> <td>John</td> <td id="birthday" class='one-week-or-less'>2020-07-28</td> <td>Street</td> </tr> </tbody> </table>

我使用此來源比較日期： https://www.geeksforgeeks.org/how-to-calculate-the-number-of-days-between-two-dates-in-javascript/