Pull content from within a table to text boxes within the modal

Question

I have a table whose contents come from a server, in json. Each row of the table has a code number, a product name and an edit button, when clicking this edit button opens a modal where there are two code and product text boxes. What I am trying to do is that when I click on the button to edit the modal open with the text boxes already filled with the information of the respective line and that, when changing and clicking on the save button from within the modal, happens the editing of the content in that line. How can I do that?

This is my HTML:

    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog" id="modaldialog">
 <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header" style="background-color:#C25C40; color:white;  border-bottom: 0 none; height:45px;">
        <h5 class="modal-title" style="top:10px;position:absolute;">Alterar Código/Grupo</h5>
    </div>
    <div class="modal-body" style="background-color:#262626;">
    <input type="text" placeholder="Código" id="Cdgrupoedit">
    <input type="text" placeholder="Grupo" id="grupoedit">
        </div>



      <div class="modal-footer" style="height:170px; background-color:#262626;border-top: 0 none;">
        <button type="button" onclick="editRow();" class="btn btn-success" data-dismiss="modal" id="modalgravar" >Gravar</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal" id="modalfechar" >Voltar</button>
        <input type="hidden" name="employee_id" id="employee_id"/> 
      </div>
    </div>

  </div>
</div>

            <div class="card-body" style="background-color:#262626">
              <form method="post" id="tableform">
                 <table class="table   table-bordered"  id="dataTable">
                 <tfoot>
                 </tfoot>
                    <tbody>


                  </tbody>
                </table>
                </form>
              </div>
            </div>
        </div>

This is my JS to create a new row in the table:

$(".row").click(function(){

             var Cdgrupo = $("#Cdgrupo").val();
             var Grupo = $("#Grupo").val();

             var markup = "<tr><td>" + Cdgrupo + "</td><td>" + Grupo + "</td>'<td><button type='button'  id='btneditar' class='btneditar btn btn-info' data-toggle='modal' data-target='#myModal' title='Alterar Grupo'><i class='fa fa-edit'></i></button><button type='button' class='btn btn-danger' title='Excluir Grupo' style='right:-4px; position:relative;'><i class='fa fa-times'></i></button></td>';</tr>";

             $("table tfoot").append(markup);

         }); 

This is the JS to pull the content from the server:

$(function(){
    $.ajax({
        url: "http://xxx/datasnap/rest/xxx/xxx/",

        dataType: 'json',
        type: 'get',
        cache:false,
        success: function(data){

            var event_data = '';

                //começo da tabela
                event_data += '<thead>';
                event_data += '<tr style="color:white">';
                event_data += '<th width="10%">Código</th>';
                event_data += '<th>Grupo</th>';

                event_data += '<th width="15%">Ação</th>';
                event_data += '</tr>';  
                event_data += '</thead>';   

                //final da tabela


            //conteudo da tabela vindo da url
            $.each(data, function(index, value){

                event_data += '<tr>';
                event_data += '<td>'+value.Cdgrupo+'</td>';
                event_data += '<td>'+value.Grupos+'</td>';
                event_data += '<td><button type="button" class="editbtn btn btn-info mesmo-tamanho" data-toggle="modal" data-target="#myModal" title="Alterar Grupo"><i class="fa fa-edit"></i></button><button type="button" class="btn btn-danger mesmo-tamanho" title="Excluir Grupo" style="right:-4px; position:relative;"><i class="fa fa-times"></i></button></td>';
                event_data += '</tr>';
            });


            $('#dataTable').css({'color':'white'});
            $("#dataTable").append(event_data);
        },

        //aviso de erro caso o conteudo da tabela não seja carregado
        error: function(d){

            alert("Erro.");
        }


    });
});

Answer 1

You can get the table row values from the action button on the same line with $(this).parents('tr').find('td').eq(*índice*).text().

parents('tr') reaches up to the <tr> ascending from <td> which the <button> is, find('td') search for the <td> daughters and eq(*índice*) arrives at the specified index element starting in 0.

The code you need is this:

$('.table').on("click", ".editbtn", function(){
  $("#Cdgrupoedit").val(getLineColumn($(this), 0));
  $("#grupoedit").val(getLineColumn($(this), 1));
});

function getLineColumn(element, index){
  return element.parents('tr').find('td').eq(index).text()
}

See working with your information:

$(function(){

	$(".row").click(function(){
    var Cdgrupo = $("#Cdgrupo").val();
    var Grupo = $("#Grupo").val();
    var markup = "<tr><td>" + Cdgrupo + "</td><td>" + Grupo + "</td>'<td><button type='button'  id='btneditar' class='btneditar btn btn-info' data-toggle='modal' data-target='#myModal' title='Alterar Grupo'><i class='fa fa-edit'></i></button><button type='button' class='btn btn-danger' title='Excluir Grupo' style='right:-4px; position:relative;'><i class='fa fa-times'></i></button></td>';</tr>";
    $("table tfoot").append(markup);
  });

  $.ajax({
    url: "https://api.myjson.com/bins/gx6iy",

    dataType: 'json',
    type: 'get',
    cache:false,
    success: function(data){
      var event_data = '';

      //começo da tabela
      event_data += '<thead>';
      event_data += '<tr style="color:white">';
      event_data += '<th width="10%">Código</th>';
      event_data += '<th>Grupo</th>';

      event_data += '<th width="15%">Ação</th>';
      event_data += '</tr>';  
      event_data += '</thead>';   
      //final da tabela

      //conteudo da tabela vindo da url
      $.each(data, function(index, value){
        event_data += '<tr>';
        event_data += '<td>'+value.Cdgrupo+'</td>';
        event_data += '<td>'+value.Grupos+'</td>';
        event_data += '<td><button type="button" class="editbtn btn btn-info mesmo-tamanho" data-toggle="modal" data-target="#myModal" title="Alterar Grupo"><i class="fa fa-edit"></i></button><button type="button" class="btn btn-danger mesmo-tamanho" title="Excluir Grupo" style="right:-4px; position:relative;"><i class="fa fa-times"></i></button></td>';
        event_data += '</tr>';
      });
      $('#dataTable').css({'color':'white'});
      $("#dataTable").append(event_data);
    },
    
    //aviso de erro caso o conteudo da tabela não seja carregado
    error: function(d){
      alert("Erro.");
    }
  });

  $('.table').on("click", ".editbtn", function(){
    $("#Cdgrupoedit").val(getLineColumn($(this), 0));
    $("#grupoedit").val(getLineColumn($(this), 1));
  });

  function getLineColumn(element, index){
    return element.parents('tr').find('td').eq(index).text()
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog" id="modaldialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header" style="background-color:#C25C40; color:white;  border-bottom: 0 none; height:45px;">
        <h5 class="modal-title" style="top:10px;position:absolute;">Alterar Código/Grupo</h5>
      </div>
      <div class="modal-body" style="background-color:#262626;">
        <input type="text" placeholder="Código" id="Cdgrupoedit" disabled="disabled">
        <input type="text" placeholder="Grupo" id="grupoedit">
      </div>
      <div class="modal-footer" style="height:170px; background-color:#262626;border-top: 0 none;">
        <button type="button" onclick="editRow();" class="btn btn-success" data-dismiss="modal" id="modalgravar" >Gravar</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal" id="modalfechar" >Voltar</button>
        <input type="hidden" name="employee_id" id="employee_id"/> 
      </div>
    </div>
  </div>
</div>

<div class="card-body" style="background-color:#262626">
  <form method="post" id="tableform">
    <table class="table table-bordered" id="dataTable">
      <tfoot></tfoot>
      <tbody></tbody>
    </table>
  </form>
</div>

I learned that when I asked that question: Selecting row information in an HTML table