1

Eu tenho uma tabela cujo o conteudo dela vem de um servidor, em jSON. Cada linha da tabela possui um numero de código, um nome de produto e um botão de editar, ao clicar nesse botão de editar abre uma modal onde tem duas caixas de texto de codigo e produto. O que eu estou tentando fazer é que quando eu clicar no botão de editar o modal abra com as caixas de texto ja preenchidas com as informações da respectiva linha e que, ao mudar e clicar no botão de salvar de dentro da modal, aconteça a edição do conteudo naquela linha. Como posso fazer isso?

Esse é o meu 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>

Esse é o meu JS para criar uma nova linha na tabela:

$(".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);

         }); 

Esse é o JS para puxar o conteudo do servidor:

$(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.");
        }


    });
});
0

1 Resposta 1

2

É possível obter os valores da linha da tabela a partir do botão de ação que está na mesma linha com $(this).parents('tr').find('td').eq(*índice*).text().

parents('tr') chega até a <tr> ascendente da <td> qual o <button> está, find('td') busca as <td> filhas e eq(*índice*) chega ao elemento com índice especificado que inicia em 0.

O código que você precisa é esse:

$('.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()
}

Veja funcionando com suas informações:

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

Aprendi isso quando fiz essa pergunta: Selecionar informações de um linha numa tabela HTML

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .