使用PHP编辑HTML表单，在新页面中使用MySQL数据库填充HTML表格行

Question

所以，我正在编写一个新的CMS，用于商业广告插入与客户相关的报告，但我需要一些帮助，因为我有点用PHP和MySQL菜鸟。

我需要做的是打开一个新页面，使用我创建的HTML表单并使用我在表格中选择的行的内容填充它。

在这种情况下，“客户”（我需要编辑的内容），所有这些都有唯一的ID。

我会尝试在下面的图片中显示我想要做的事情。

这是内容所在的表格，我希望能够点击右侧的编辑链接，并在新页面上打开，表格全部填充。

Table

这是我需要使用所选行的内容填充的表单。

Form

这是表格的代码：

<?php
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_name = 'minicms';

$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
    die ('ERROR CONNECTING TO DB: ' . mysqli_connect_error());  
}

$sql = 'SELECT * 
        FROM clients';

$query = mysqli_query($conn, $sql);

if (!$query) {
    die ('SQL Error: ' . mysqli_error($conn));
}
?>

<table class="table table-striped">
    <thead class="thead-color">
        <tr>
            <th scope="col">Designação Social</th>
            <th scope="col">Nome</th>
            <th scope="col">NIF</th>
            <th scope="col">Rua</th>
            <th scope="col">Código Postal</th>
            <th scope="col">Localidade</th>
            <th scope="col">País</th>
            <th scope="col">E-mail</th>
            <th scope="col">Editar</th>
        </tr>
    </thead>
    <tbody>
        <?php
        while ($row = mysqli_fetch_array($query))
        {
            echo '<tr>
                    <td>'.$row['namefat'].'</td>
                    <td>'.$row['name'].'</td>
                    <td>'.$row['nif'].'</td>
                    <td>'.$row['street'].'</td>
                    <td>'.$row['postal'].'</td>
                    <td>'.$row['local'].'</td>
                    <td>'.$row['country'].'</td>
                    <td>'.$row['email'].'</td>
                    <td><a href=""><i class="fa fa-edit"></i></a></td>
                </tr>';
        }?>
    </tbody>
</table>

这是表格的代码：

<form>
    <div class="form-group">
        <label for="namefat">Designação Social</label>
        <br>
        <input type="text" name="namefat" class="form-control" id="namefat">
    </div>
    <div class="form-group">
        <label for="name">Nome</label>
        <br>
        <input type="text" name="name" class="form-control" id="name">
    </div>
    <div class="form-group">
        <label for="nif">NIF</label>
        <br>
        <input type="text" name="nif" class="form-control" id="nif">
    </div>
    <div class="form-group">
        <label for="street">Rua</label>
        <br>
        <input type="text" name="street" class="form-control" id="street">
    </div>
    <div class="form-group">
        <label for="postal">Codigo Postal</label>
        <br>
        <input type="text" name="postal" class="form-control" id="postal">
    </div>
    <div class="form-group">
        <label for="local">Localidade</label>
        <br>
        <input type="text" name="local" class="form-control" id="local">
    </div>
    <div class="form-group">
        <label for="country">País</label>
        <br>
        <input type="text" name="country" class="form-control" id="country">
    </div>
    <div class="form-group">
        <label for="email">E-mail</label>
        <br>
        <input type="text" name="email" class="form-control" id="email">
    </div>
    <button type="submit" class="btn btn-primary">Adicionar</button>
</form>

希望我能够正确解释我的问题

Answer 1

你可以做的就是把它放在bootstrap模态中，除了你的

之外

tr行

 echo '<tr>
                    <td>'.$row['namefat'].'</td>
                    <td>'.$row['name'].'</td>
                    <td>'.$row['nif'].'</td>
                    <td>'.$row['street'].'</td>
                    <td>'.$row['postal'].'</td>
                    <td>'.$row['local'].'</td>
                    <td>'.$row['country'].'</td>
                    <td>'.$row['email'].'</td>
                    <td><a href="" data-toggle="modal" data-target="#exampleModal'.$rowId."><i class="fa fa-edit"></i></a></td>
                    <div class="modal fade" id="exampleModal'.$rowId.'>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

<!-- put your form code inside this  with jquery submit with ajax
   you can populate your entire form with values here 
 -->

<form>
<div class="form-group">
    <label for="namefat">Designação Social</label>
    <br>
    <input type="text" name="namefat" class="form-control" id="namefat">
</div>
<div class="form-group">
    <label for="name">Nome</label>
    <br>
    <input type="text" name="name" class="form-control" id="name">
</div>
<div class="form-group">
    <label for="nif">NIF</label>
    <br>
    <input type="text" name="nif" class="form-control" id="nif">
</div>
<div class="form-group">
    <label for="street">Rua</label>
    <br>
    <input type="text" name="street" class="form-control" id="street">
</div>
<div class="form-group">
    <label for="postal">Codigo Postal</label>
    <br>
    <input type="text" name="postal" class="form-control" id="postal">
</div>
<div class="form-group">
    <label for="local">Localidade</label>
    <br>
    <input type="text" name="local" class="form-control" id="local">
</div>
<div class="form-group">
    <label for="country">País</label>
    <br>
    <input type="text" name="country" class="form-control" id="country">
</div>
<div class="form-group">
    <label for="email">E-mail</label>
    <br>
    <input type="text" name="email" class="form-control" id="email">
</div>
<button type="submit" class="btn btn-primary">Adicionar</button>
 </form> </div> </tr>';

通过这种方式，您甚至不需要有一个单独的页面来更改提交此ajax请求的数据，甚至可以刷新页面以节省创建新页面所需的额外时间并完成编辑而无需更改页面

代替这个

?>
      <tr>
                    <td><?php echo $row['namefat'];?></td>
                    <td> <?php echo $row['name'];?> </td>
                    <td> <?php echo $row['nif'];?>  </td>
                    <td><?php echo $row['street'];?> </td>
                    <td><?php echo $row['postal'];?></td>
                    <td><?php echo $row['local'];?></td>
                    <td><?php echo $row['country'];?> </td>
                    <td> <?php echo $row['email'];?></td>
<td><a href="" data-toggle="modal" data-target="#exampleModal<?php echo $row['id'];/* possible unique id */ ?>"><i class="fa fa-edit"></i></a></td>
<div class="modal fade" id="exampleModal<?php echo $row['id'];/* possible unique id */ ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

<!-- put your form code inside this  with jquery submit with ajax
   you can populate your entire form with values here 
 -->

<form>
<div class="form-group">
    <label for="namefat">Designação Social</label>
    <br> 
    <input type="text" name="namefat" class="form-control" id="namefat" value="<?php echo $row['namefat'];?>">
</div>
<div class="form-group">
    <label for="name">Nome</label>
    <br>
    <input type="text" name="name" class="form-control" id="name" value="<?php echo $row['name'];?>">
</div>
<div class="form-group">
    <label for="nif">NIF</label>
    <br>
    <input type="text" name="nif" class="form-control" id="nif" value=" <?php echo $row['nif'];?> ">
</div>
<div class="form-group">
    <label for="street">Rua</label>
    <br>
    <input type="text" name="street" class="form-control" id="street" value="<?php echo $row['street'];?>">
</div>
<div class="form-group">
    <label for="postal">Codigo Postal</label>
    <br>
    <input type="text" name="postal" class="form-control" id="postal" value="<?php echo $row['postal'];?>">
</div>
<div class="form-group">
    <label for="local">Localidade</label>
    <br>
    <input type="text" name="local" class="form-control" id="local" value="<?php echo $row['local'];?>">
</div>
<div class="form-group">
    <label for="country">País</label>
    <br>
    <input type="text" name="country" class="form-control" id="country" value="<?php echo $row['country'];?>">
</div>
<div class="form-group">
    <label for="email">E-mail</label>
    <br>
    <input type="text" name="email" class="form-control" id="email" value="<?php echo $row['email'];?>">

     <input type="hidden" name="id" class="form-control" id="email" value="<?php echo $row['id']; /* possible unique id */ ?>">
</div>
<button type="submit" class="btn btn-primary">Adicionar</button>
 </form> </div>
</tr>

<?php 

这将在每个列中显示一个表单，只需在php文件脚本标记中添加bootstrap文件，bootstrap.js和bootstrap.css

你可以在这里阅读它

https://getbootstrap.com/docs/4.0/components/modal/