how to update just one column of table generatedy by php/mysql with out reloading page/table?

Question

So I have the following HTML table being generated with php getting data from a mysql table. And what I want to do is constantly update just that last row using ajax so that the table doesn't reload the entire table.

<tbody>
                    <?php while($row = MySQL_fetch_array($result)):
                    $id = htmlentities($row['id']);
                    $status = htmlentities($row['status']);
                    include ("button.php");
                    ?>
                    <tr>
                        <td title="lname" width="100px">
                            <div style="width:100px; overflow:hidden;">
                                <?php echo(htmlentities($row['last_name'])); ?>
                            </div>
                        </td>
                        <td width="100px">
                            <div style="width:100px; overflow:hidden;">
                                <?php echo(htmlentities($row['first_name'])); ?>
                            </div>
                        </td>    
                        <td width="100px">
                            <div style="width:100px; overflow:hidden;">
                                <?php echo(htmlentities($row['u_name'])); ?>
                            </div>
                        </td>  
                        <td width="100px">
                            <div style="width:150px; overflow:hidden;">
                                <?php echo(htmlentities($row['skype_id'])); ?>
                            </div>
                        </td>
                        <td width="100px">
                            <div style="width:100px; overflow:hidden;">
                                <?php echo(htmlentities($row['primary_location'])); ?>
                            </div>
                        </td>
                        <td>
                            <div style="width:100px; overflow:hidden;">
                                <?php echo(htmlentities($row['phone'])); ?>
                            </div>
                        </td>
                        <td>
                            <div style="width:100px; overflow:hidden;">                                     
                                <?php echo '<div><div id="r'.$id.'"><div id="test"><img class="rating" id="'.$status.$id.'" src="'.$color.'"><div style="display:none;">'.$status.'</div></div></div></div>';?>
                            </div>
                        </td>
                    </tr>                       
                    <?php endwhile; ?>
                </tbody>

I tried doing the following:

<script>
$(document).ready(function(){
  refreshTable();
});

function refreshTable(){
    $('#test').load('response.php', function(){
       setTimeout(refreshTable, 5000);
    });
}
</script>

Where response.php just had the entire while loop again. The problem with this were the following:

1) After a few seconds, the page would get slower and slower...less and less responsive. And soon it would just grind to a halt. I have no idea why.

2) The refresh is visible. All the table highlight blinks off for a moment at each refresh.

So I thought, maybe if I just try refreshing the one column...it wouldn't grind to a halt? However, ever attempt I made to just update the column broke everything, all my scripts would stop working. And I'm not sure how to get rid of the issue of the table highlighting disappearing at refresh. How can I get this all to work?

Thanks!

Answer 1

Make an ajax request to a URL which only returns the last row in json (or html, surrounded by the <tr> tags of course) format. Then, replace the last row using javascript.