以特定間隔更新html表格

Question

我是PHP和Ajax的新手。在我的項目中，我需要更新一個html表格（例如，表格的每一行將包含房間名稱和當前房間溫度，我需要在特定的時間間隔更新每行的溫度值）。

後臺MySQL表將包含每個房間的當前溫度值。該網頁基於bootstrap3。行數是由我的PHP代碼動態生成的。

如何在特定時間間隔更新這些值（每行）？

Answer 1

這是怎麼

jQuery的

setInterval(function(){ 

    $.get("get_my_updated_values.php" , function(result){ 

    $("#my_table_tbody").html(result); // my_table_tbody is the id of the body of your table. 

    }); 

}, 3000); 

HTML

<table> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
     </tr> 
    </thead> 
    <tbody id = "my_table_tbody"> 
     <tr> 
      <td>Row 1 Data 1</td> 
      <td>Row 1 Data 2</td> 
     </tr> 
</tbody> 
</table> 

PHP（get_my_updated_values.php）

<?php 

// some php to retrieve the data from your database 

echo '<tr> 
      <td>New data 1</td> 
      <td>new data 2</td> 
     </tr>'; 

?> 

將每3秒後刷新...它你想要的確切的事情......希望幫助

Answer 2

我使用以下方法來更新我的網頁的某些方面：

<div id="header-wrapper"><span class="pull-right label label-default" id="header-count"><?php echo $count; ?></span></div> 


<script> 
$(document).ready(function(){ 

    var $header = $("#header-wrapper"); 

    setInterval(function() { 

     $header.load("test.php #header-count"); 

    }, 10000); 
}); 
</script>