1

Boa tarde pessoal! Estou tentando passar valores de uma tabela para uma janela modal, mas não estou conseguindo... tentei algo de jquery, mas não sei o que posso estar fazendo errado... Vou postar o código, que está funcionando, porém sem alterações que fiz nas tentativas...

Exemplo da tabela funcionando

Ao clicar em alterar, gostaria de pegar os valores e passar para o dialog.

Agradeço a todos pela ajuda :)

                    <c:if test="${fn:length(lista) > 0 }">
                    <table class="table table-hover">
                        <tr>

                            <th >Código</th>
                            <th>Nome</th>
                            <th>Descrição</th>
                            <th>Medida</th>
                            <th>Fornecedor</th>
                            <th>Quantidade Mínima</th>
                            <th>Quantidade Máxima</th>
                            <th>Estoque</th>
                            <th>Categoria</th>
                            <th>Preço</th>
                            <th></th>
                        </tr>
                        <c:forEach items="${lista }" var="mat">
                            <tr>

                                <td>${mat.codigo }</td>
                                <td>${mat.nome }</td>
                                <td>${mat.descricao }</td>
                                <td>${mat.medida }</td>
                                <td>${mat.fornecedor }</td>
                                <td>${mat.qtd_Min }</td>
                                <td>${mat.qtd_Max }</td>
                                <td>${mat.estoque }</td>
                                <td>${mat.categoria.categoria }</td>
                                <td>${mat.preco }</td>

                                <td><a href="#DialogAlterarMaterial" class="btn btn-xs btn-info" data-toggle="modal">Alterar</a> 
                                    <a href="remover.html?id_material=${mat.id_material }"class="btn btn-xs btn-danger" >Remover</a>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>

                </c:if>

     <!--  ----------------------------------------------Painel para Alteração---------------------------------------------------------------------------- -->

                      <div id="DialogAlterarMaterial" class="modal fade"
                            aria-hidden="true" aria-labelledby="myModalLabel" role="dialog"
                            tabindex="-1" style="display: none;">

                            <div class="modal-dialog" style="width: 800px;">
                                <div class="modal-content">

                                    <div class="modal-header">
                                        <button class="close" aria-hidden="true" data-dismiss="modal"
                                            type="button">×</button>
                                        <h4 class="modal-title">Cadastro de Materiais</h4>
                                    </div>
                                    <div class="modal-body" style="min-height: 500px;">

                                        <form action="alterar.html" method="post">
                                            <div class="form-group" style="width: 80px; float: left;margin-top: 0%">
                                                <label for="codigo">Código</label> <input name="codigo"
                                                    class="form-control" type="text" value="${mat.codigo }">
                                            </div>
                                            <div class="form-group"
                                                style="width: 300px; float: left; margin-top: 9%; margin-left: -10.5%">
                                                <label for="nome">Nome</label> <input name="nome"
                                                    class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 430px; float: left; margin-left: 2%; margin-top: 9%;">
                                                <label for="descricao">Descrição</label> <input
                                                    name="descricao" class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 130px; float: left; margin-left: 0%; margin-top: 0%">
                                                <label for="unimed">Unidade de Medida</label> <input
                                                    name="unimed" class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 155px; float: left; margin-left: 2%;margin-top: 0%">
                                                <label for="preco">Preço</label> <input name="preco"
                                                    class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 430px; float: left; margin-left: 2%;margin-top: 0%">
                                                <label for="fornecedor">Fornecedor</label> <input
                                                    name="fornecedor" class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 85px; float: left; margin-left: 0%;">
                                                <label for="qtdMin">Qtd. Mínima</label> <input
                                                    name="qtd_Min" class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 85px; float: left; margin-left: 2%;">
                                                <label for="qtdMax">Qtd. Máxima</label> <input
                                                    name="qtd_Max" class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 85px; float: left; margin-left: 2%;">
                                                <label for="estoque">Estoque</label> <input
                                                    name="estoque" class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 130px; float: left; margin-left: -38%;margin-top: 10%;">
                                                <label for="categoria">Categoria</label> <select 
                                                    name="categoria" class="form-control" type="text" onchange='CheckCat(this.value);'>
                                                    <option selected disabled hidden>Categoria</option>
                                                    <c:forEach items="${cBean.listarCategoria}" var="cat">
                                                    <option  value="${cat.categoria }">${cat.categoria }</option>



                                                    </c:forEach>
                                                </select>
                                            </div>
                                            <div class="form-group"
                                                style="width: 130px; float: left; margin-left: -19%;display: none; margin-top: 10%" id="Outros">
                                                <label for="catOutros">Outros</label> <input name="catOutros"
                                                    class="form-control" type="text" >
                                            </div>

                                            <div style="width: 30px; margin-top: 25%;float: right;margin-right: 8%">
                                                <button class="btn btn-primary" type="submit">Cadastar</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>




     <!--  --------------------------------------------Fim do Painel para Alteração---------------------------------------------------------------------------- -->

2 Respostas 2

1

Para resolver esse problema você pode adotar diversas alternativas, dentre elas:

  • Gerar um identificador único para cada <td>
  • Recuperar os campos <td> na ordem de acordo com <tr> parent.

Vou comentar um pouco sobre as duas e dar um código de exemplo para você se situar.

Opção 1 - Gerar identificador único para cada <td>

Você precisa se certificar de que cada linha da coluna tenha um identificador único, assim, você pode usá-lo para distinguir os <td>. Neste caso usarei o campo código.

Ficaria algo mais ou menos assim:

<table class="table table-hover">
<tr>
    <th >Código</th>
    <th>Nome</th>
    <th>Descrição</th>
    <th>Medida</th>
    <th>Fornecedor</th>
    <th>Quantidade Mínima</th>
    <th>Quantidade Máxima</th>
    <th>Estoque</th>
    <th>Categoria</th>
    <th>Preço</th>
    <th></th>
</tr>
<c:forEach items="${lista}" var="mat">
    <tr>
        <td id="codigo${mat.codigo}">${mat.codigo }</td>
        <td id="nome${mat.codigo}">${mat.nome }</td>
        <td id="descricao${mat.codigo}">${mat.descricao }</td>
        <td id="medida${mat.codigo}">${mat.medida }</td>
        <td id="fornecedor${mat.codigo}">${mat.fornecedor }</td>
        <td id="qtd_Min${mat.codigo}">${mat.qtd_Min }</td>
        <td id="qtd_Max${mat.codigo}">${mat.qtd_Max }</td>
        <td id="estoque${mat.codigo}">${mat.estoque }</td>
        <td id="categoria${mat.codigo}">${mat.categoria.categoria }</td>
        <td id="preco${mat.codigo}">${mat.preco }</td>
        <td><a href="#DialogAlterarMaterial" class="btn btn-xs btn-info alterar" data-toggle="modal" data-id="${mat.codigo}">Alterar</a>
            <a href="remover.html?id_material=${mat.id_material }"class="btn btn-xs btn-danger" >Remover</a>
        </td>
    </tr>
</c:forEach>

No fim, o html gerado ficará assim:

<!-- ... -->
<td id="codigo0202">0202</td>
<td id="nome0202">teste</td>
<td id="descricao0202">teste</td>
<!-- ... -->

Depois, com JQuery você pode recuperar esses valores através do atributo data-id adicionado no botão e assim terá um identificador de cada <td>:

$(".alterar").on('click', function(){
   var id = $(this).data('id'); //recuperar qual o id da linha
   //agora vamos usar o id da linha para recuperar cada campo..
   var nome = $('#nome' + id).text(); //vai retornar nome da linha do botão
   var descricao = $('#descricao' + id).text(); //vai retornar descricao da linha do botao
   //..assim por diante..
   //agora voce pode jogar esses valores no seu modal
   //depois de jogar tudo, voce pode exibir seu modal manualmente:
   $("#DialogAlterarMaterial").modal();
});

Opção 2 - Recuperar os valores de acordo com o parent <tr>

A outra alternativa é recuperar os valores de acordo com o parent do botão. A lógica é equivalente à lógica explicada acima, mas mais simples. Você só precisar dessa vez adicionar o id da linha a tag <tr> que é um container para a linha inteira.

Ficaria algo mais ou menos assim:

<table class="table table-hover">
    <tr>
        <th >Código</th>
        <th>Nome</th>
        <th>Descrição</th>
        <th>Medida</th>
        <th>Fornecedor</th>
        <th>Quantidade Mínima</th>
        <th>Quantidade Máxima</th>
        <th>Estoque</th>
        <th>Categoria</th>
        <th>Preço</th>
        <th></th>
    </tr>
    <c:forEach items="${lista}" var="mat">
        <tr id="linha${mat.codigo}">
            <td>${mat.codigo }</td>
            <td>${mat.nome }</td>
            <td>${mat.descricao }</td>
            <td>${mat.medida }</td>
            <td>${mat.fornecedor }</td>
            <td>${mat.qtd_Min }</td>
            <td>${mat.qtd_Max }</td>
            <td>${mat.estoque }</td>
            <td>${mat.categoria.categoria }</td>
            <td>${mat.preco }</td>
            <td><a href="#DialogAlterarMaterial" class="btn btn-xs btn-info alterar" data-toggle="modal" data-id="${mat.codigo}">Alterar</a>
                <a href="remover.html?id_material=${mat.id_material }"class="btn btn-xs btn-danger" >Remover</a>
            </td>
        </tr>
    </c:forEach>
</table>

O que é interessante notar nesse código é a linha: <tr id="linha${mat.codigo}">... Você não está mais deixando cada tag <td> única na tabela, mas sim, cada pai ou container de <td> ou seja, os <tr>.

Assim você pode recuperar os valores de cada td utilizando JQuery da seguinte forma:

$(".alterar").on('click', function(){
       var id = $(this).data('id'); //recuperar qual o id da linha
       //agora vamos usar o id para recuperar a linha inteira ou o <tr>
       var linha = $('#linha' + id); //temos o <tr> atribuidos a variavel linha
       var nome = $(linha[1]).text(); //vai retornar nome da linha do botão
       var descricao = $(linha[2]).text();.text(); //vai retornar descricao da linha do botao
       //..assim por diante..
       //agora voce pode jogar esses valores no seu modal
       //depois de jogar tudo, voce pode exibir seu modal manualmente:
       $("#DialogAlterarMaterial").modal();
    });

No código acima, você pode notar que a linha vai conter um objeto JQuery que possui todos os <td>'s dentro dele em forma de índices de um Array. Basta acessar esses indices para recuperar cada campo que necessita para montar seu modal.

Espero ter ajudado.

5
  • Cara, obrigado pela resposta, está ótima, muito bem explicada. Só não entendi como vou chamar esses valores no modal... pode me explicar, por favor? teitei de algumas formas aqui e não está aparecendo nada...
    – sounobre
    7/11/2016 às 15:42
  • ahhhh, estou usando a primeira opção, e está tudo legal com o html gerado, está acontecendo da forma que vc falou.
    – sounobre
    7/11/2016 às 15:43
  • Dentro de cada input do modal você coloca um id, exemplo: <input name="descricao" class="form-control" type="text" id="mdescricao">. Dai você adiciona o valor recuperado no JQuery pra dentro do campo value desse input, exemplo: var descricao = $('#descricao' + id).text(); $("#mdescricao").val(descricao);. 7/11/2016 às 17:02
  • Obrigado amigo, vou testar assim q chegar em ksa e aviso :)
    – sounobre
    7/11/2016 às 20:49
  • 1
    Amigo, obrigado! Funcionou perfeitamente!!! Estava há uns dias quebrando a cabeça com isso... não achava nada que funcionasse... Obrigado :)
    – sounobre
    7/11/2016 às 22:32
0

Muda essa linha no código acrescentando o .children() que vai ficar redondo

Antes:

var linha = $('#linha' + id); //temos o <tr> atribuidos a variavel linha

Depois:

var linha = $('#linha' + id).children(); //temos o <tr> atribuidos a variavel linha

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 .