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

Question

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

我不知道要这样做。 而且我还没有在互联网上找到任何东西。 所以我来这里问。

在这里，您可以看到我当前页面的外观。

我的桌子

我用于生成/填充表的代码：

<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的行提供数据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>命名<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秒更新每个项目的Predecessor。那么您只需要编写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);

Answer 2

将其放在单独的脚本中：

                        <?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  } ?>

并将其称为“ table.php”。

并添加js代码，该代码将对table.php进行AJAX调用并更新我们的表

$.ajax('table.php', {
      success: function(data) {
     $('.table-bordered.table-condensed tbidy').html($(data));
     $('#notification-bar').text('The page has been successfully loaded');
  },
  error: function() {
     $('#notification-bar').text('An error occurred');
  }
});