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一些class和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秒更新一个项目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＆＃39;。

并添加js代码，这将使AJAX调用table.php并更新我们的表

$.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');
  }
});

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

2 个答案: