php - 使用 PHP 和 AJAX 更新 HTML 表中的内容

Question

我正在尝试使用 MySQL 连接按 PHP 中的更新按钮来更新表的内容。我想结合 Ajax 和 PHP，因为通过使用它我不必每次都刷新页面。

我不知道该怎么做。而且我在互联网上没有找到任何东西。所以我才来这里问问。

您可以在此处看到我当前页面的图片。

My table

我用来生成/填充表的代码:

<div class="col-md-12">
    <h3 class="title">Active Tasks</h3>
    <table class="table table-bordered table-condensed">
        <thead>
            <tr>
                <th>Task</th>
                <th>Predecessor</th>
                <th>Dev</th>
                <th>MOSCOW</th>
                <th>Plan</th>
                <th>Do</th>
                <th>Check</th>
                <th>Act</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <?php
            $query = mysqli_query($conn, $SQL); 
            while ($row = mysqli_fetch_array($query)) {?>
            <tr class="active">
                <td style="display:none;><?php echo $row['ID'];?></td>
                <td style="display:none;"><?php echo $row['ProjectID'];?></td>
                <td><?php echo $row['Task'];?></td>
                <td><?php echo $row['Predecessor'];?></td>
                <td><?php echo $row['Dev'];?></td>
                <td><?php echo $row['MOSCOW'];?></td>
                <td class="js-Task-Plan"><?php echo $row['Plan'];?></td>
                <td class="js-Task-Do"><?php echo $row['Do'];?></td>
                <td><?php echo $row['Check'];?></td>
                <td><?php echo $row['Act'];?></td>
                <td>
                    <button type="button" class="js-TimerStart btn btn btn-default">Start</button>
                    <button type="button" class="js-TimerPauzeer btn btn-default">Pauzeer</button>
                    <button type="button" class="js-TimerResume btn btn-default">Resume</button>

                    <a class="btn btn-default btn-info" href="editTask.php?TaskID=<?php echo $row['ID'];?>&projectid=<?php echo $ID;?>">Aanpassen</a>
                    <a class="btn btn-default btn-danger" href="delete_task.php?TaskID=<?php echo $row['ID'];?>&projectid=<?php echo $ID;?>">Verwijderen</a>
                </td>
            </tr>
            <?php  } ?>
        </tbody>
    </table>
    <button class="btn btn-block btn-default btn-success" name="UpdateTable"><span style="font-weight: bold;">Update</span></button>
</div>

感谢您的每一点回复和信息。

Answer 1

这不是太大的问题。您只需为表行和 tds 提供一些类和 id。首先，为所有行提供唯一的 id，在您的情况下，您有 <?php echo $row['ID'];?并为所有行提供相同的类，这些将使用后面的步骤。并为每一行提供具有唯一 id 的 data-id ...所以每个 tr 都可以命名为 <tr id='tr_<?php echo $row['ID'];?>' class='projects' data-id='<?php echo $row['ID'];?>'> and Predecessor td witl be <td id='p_<?php echo $row['ID'];?>'></td>

现在我假设您想要每 3 秒更新一次每个项目的前身..那么您只需要编写 ajax 调用来进行更新。

setInterval(function(){ 
$('.project').each(function(){
var id=$(this).data('id');
 $.ajax({
   url:'php_file _name_that_takes_project_id_and_get_details_from_database',
   data:{id:id},
   type:'POST',
   sucess:function(data){
     // here data is returned value by ajax php file call which takes project id and fetch Predecessor related to this id.
$('#p_'+id).html(data);

   }
   });
});
, 3000);