使用JavaScript突出顯示動態php表中的單元格

Question

當我測試代碼時，如果它正在使用靜態表運行，則可以正常工作。 但是，當我在生成動態表的頁面上運行它時，什么也沒有發生。

JavaScript代碼

    <script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>

<script type="text/javascript">
$('#Weekly td').each(function() {
if ($(this).text() == 'Yes') {
    $(this).closest('td').css('background-color', 'yellow');
}
});
</script>

PHP代碼

if ($WeeklyResult->num_rows > 0){
   echo "<Table id=Weekly>";
   $headerRow = TRUE;
   while ($row = $WeeklyResult->fetch_assoc()){
       if($headerRow){
           $headerRow = FALSE;
           echo "<tr>";
           foreach (array_keys($row) as $header){
               echo"<th>$header</th>";

           }
           echo "</tr>";
       }
       echo "<tr>";
       foreach ($row as $value){
           echo "<td>$value</td>";

       }
       echo "</tr>";
   }
   echo "</table>";

}

Answer 1

在對該表執行任何操作之前，該表必須存在。 確保在解釋了PHP並呈現頁面后觸發了js。

Answer 2

您可以像這樣更改jQuery代碼：

<script>
jQuery(function(){
    $('#Weekly td').each(function() {
        if ($(this).text() == 'Yes') {
            $(this).css('background-color', 'yellow');
        }
    });
});
</script>

這樣，當文檔准備就緒且DOM已完全構建時，便可以運行代碼。

Answer 3

$（document）.ready將為您提供幫助。 嘗試一下：

<script type="text/javascript">
    $(document).ready(function() {
        $('#Weekly td').each(function() {
            if ($(this).text() == 'Yes') {
                $(this).closest('td').css('background-color', 'yellow');
            }
        });
    });
</script>