php - 使用 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 modal 中，就在你的 , 旁边

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 请求时的数据，甚至不需要刷新页面的表单，从而节省了创建新页面和完成编辑所需的额外时间，而无需真正更改页面

用SO代替这个

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