Question

我是一名初学PHP / HTML / JAVASCRIPT编码器，我在制作桌子时遇到了问题＆＃34;编辑＆＃34;按钮工作正常，我希望你们能帮助我！

以下是故事：我正在创建一个引导表，以及一个for循环来从数据库中获取数据并为存储的每一行创建新行。 for循环还会创建一个名为＆＃39; edit＆＃39;的按钮（来自bootstrap）。当我点击这个按钮时，我使用jQuery显示一个带有表格的模态，这是一个div ..

所以，我的问题是：如何根据用户在表格中点击的行填充模态的div（使用值=＆＃34;＆＃34;）？

代码：

<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

我认为点击编辑按钮时你想把数据放到模态中您创建的表单是对吗？

Answer 2

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

您需要确保正确映射表格行中的名称以形成输入名称。

希望它有所帮助！

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

2 个答案: