php - 从表行获取数据并将其传递给表单

我是PHP / HTML / JAVASCRIPT初学者，在使表格的“编辑”按钮正常工作时遇到问题，希望大家能帮帮我！

故事是这样的：我正在创建一个引导表和一个for循环，以从数据库中获取数据并为存储的每一行创建新行。 for循环还创建了一个（从引导程序）名为“ edit”的按钮，当我单击该按钮时，我使用的是jQuery以div形式显示带有表单的Modal。

因此，我的问题是：如何根据用户在表中单击的行填充模式的div（使用value =“”）？

码：

<table class = "table table-condensed table-striped">
    <tr>
        <th width = "20%">Nome Completo</th>
        <th>Telefone Residencial</th>
        <th>Telefone Celular</th>
        <th>Bairro</th>
        <th>Endereço</th>
        <th>Complemento</th>
        <th></th>
    </tr>

<?php
        require("config/connection.inc.php");

        $clients = R::getAll("SELECT * FROM client");
        foreach($clients as $client) {
    ?>

    <tr>

        <td><?=$client['something']?></td>
        <td><?=$client['something']?></td>
        <td><?=$client['something']?></td>
        <td><?=$client['something']?></td>

    <td>
      <!--- How can i get the ID of the client clicked and send to the modal's div form ??--->
      <button class = "btn btn-info btn-sm" name = "edit">Edit</button>
        </td>

    </tr>

    <?php
        }
?>


</table>


<!------ MODAL'S DIV ("Alter button") ------>
<div id = "basic-modal-content">
    <div id = "titulo"><p>Edit</p></div>

<!---- I would like to populate this form according to what is on the database! ---->
<!---- But I need at least the ID from the clicked line of the table so that I can make a PHP request to the database and get the right data! ---->
    <form style = "margin-left: 50px;">
        <input type = "text" name = "something"/>
    <input type = "text" name = "something"/>
    <input type = "text" name = "something"/>

        <input type = "submit" name = "btnAlterar" value = "Alterar" class = "btn btn-info btn-sm"/>
    </form>
</div>


<!-- This is some jquery to open the modal --->
<script>
    $('[name = "edit"]').click(
        function() {
            $("#basic-modal-content").modal();

        }
    );
</script>

非常感谢你！我同意这个问题有些令人困惑，但希望你们能理解。

最佳答案

在单击事件中，您可以准备与您刚刚单击的客户端ID相关的数据对象，典型的行将如下所示：

 <tr data-row="id_from_db">
    <td name="name1"><?=$client['something']?></td>
    <td name="name2"><?=$client['something']?></td>
    <td name="name3"><?=$client['something']?></td>
    <td name="name4"><?=$client['something']?></td>

<td>
  <!--- How can i get the ID of the client clicked and send to the modal's div form ??--->
  <button class = "btn btn-info btn-sm" name = "edit" data-record="id_from_db">Edit</button>
    </td>

</tr>

然后在您的click事件中，您可以继续获取记录数据并在打开之前将准备好的数据应用到表单中...

<script>
 $('[name = "edit"]').click(
    function() {
         var recordno = $(this).attr("data-record");
        var data = getDataFromTable(recordno);
        populateModalForm(data);
        $("#basic-modal-content").modal();

    }
   );


function getDataFromTable(recordno)
{
    var data = {}
    $("[data-row="+recordno+"] td").each(function()
    {
        data[$(this).attr("name")] = $(this).html();
    });

    return data;
}

function populateFormData(data)
{
    //select all input elements having name attribute
    $("#basic-modal-content [name]").each(function()
    {
         $(this).val(data[$(this).name()]);
    })
}
</script>

您需要确保将表行中的名称正确映射为表单输入名称。

希望能帮助到你！