Получить данные из строки таблицы и передать ее в форму

Question

Я начинающий кодер PHP/HTML/JAVASCRIPT, и у меня возникли проблемы с правильной настройкой кнопки «Редактировать» таблицы, надеюсь, вы, ребята, можете мне помочь !

Вот история: Я создаю таблицу начальной загрузки и цикл for для получения данных из базы данных и создания новых строк для каждой сохраненной строки. Цикл for также создает кнопку (из бутстрапа), называемую «редактировать», и когда я нажимаю на эту кнопку, я использую jQuery, чтобы показать Modal с формой, которая находится в div.

Итак, моя проблема : Как я могу заполнить div модала (используя значение = "") в соответствии с линией, которую пользователь нажал в таблице?

Код:

<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

На событии щелчка можно подготовить объект данных, имеющий отношение к идентификатору клиента просто нажмите кнопку, типичная строка будет выглядеть ...

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

Вы должны убедиться, что имена в строке таблицы отображаются правильно сформировать имя входа.

Надеюсь, это поможет!

Answer 2

Я думаю, что при нажатии кнопки «Изменить» вы хотите поместить данные в форму модема, которую вы создали правильно?