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

Question

我是一名初学者 PHP/HTML/JAVASCRIPT 编码员，我在使表格的“编辑”按钮正常工作时遇到问题，希望你们能帮助我!

故事是这样的:我正在制作一个 Bootstrap 表和一个 for 循环以从数据库中获取数据并为存储的每一行创建新行。 for 循环还创建了一个名为“编辑”的按钮(来自 Bootstrap )，当我单击此按钮时，我正在使用 jQuery 显示带有表单的模式，该表单位于 div 中..

所以，我的问题是:如何根据用户在表格中单击的行填充模式的 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>

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

Answer 1

在点击事件中，您可以准备一个与您刚刚点击的客户端 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>

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

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

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

希望对您有所帮助!