1

Tenho uma tabela no HTML que recebe os valores vindo do banco de dados. Cada linha da tabela, ao ser clicado no icone preciso pegar os valores desta linha e ao abrir o modal mostrar essas informações no modal.

Minha tabela: inserir a descrição da imagem aqui

Quando for clicado nesse icone de editar eu preciso pegar o valor da linha referente [vlor Programado] | [Dt Vencto] | [Documento], para exibir no modal.

O problema é, como os valores dessas linhas são dinâmicos eu não consigo atribuir um id para <td> para poder pega-lo com JS.

<table class="table table-sm table-bordered table-responsive">
    <thead>
        <tr>
            <th>Documento</th>
            <th>Vlr Programado</th>
            <th>Dt Vencto</th>
            <th colspan="2" class="text-center">Ações</th>
        </tr>
    </thead>
    <tbody><tr>
            <td>FR212</td>
            <td>500</td>
            <td>2019-01-18</td>
            <td align="center">
                <a id="omdleditreceita" data-idparcela="3"><i class="fas fa-edit"></i></a>
            </td>
        </tr>
        <tr>
            <td>FR212</td>
            <td>500</td>
            <td>2019-02-17</td>
            <td align="center">
                <a id="omdleditreceita" data-idparcela="4"><i class="fas fa-edit"></a>
            </td>
        </tr>
    </tbody><tbody>
        <tr>
            <td colspan="9" align="center">
                <div class="pagination-wrap">
                    <ul class="pagination"><li><a href="/sistema/instancias/receita/add-data.php?page_no=1" style="color:red;">1</a></li></ul>                                                </div>
            </td>
        </tr>
    </tbody>
</table>

Têm alguma forma de fazer esse procedimento?

7
  • Existem várias formas, mas eu não entendi exatamente qual o problema
    – BrTkCa
    Commented 12/12/2018 às 15:47
  • Sua pergunta não está clara mas acho que entendi. Você precisa adicionar o evento em um elemento fixo a observar o click a partir dele: $(document).on('click','#btnPrepend',function(){//do something}) stackoverflow.com/questions/34896106/… Commented 12/12/2018 às 15:58
  • Poste o JS que você tentou fazer também... Commented 12/12/2018 às 16:29
  • Pq está repetindo os id's id="omdleditreceita"? Um id é igual CPF, deve ser único.
    – Sam
    Commented 12/12/2018 às 16:33
  • "...em cada linha preciso pegar para exibir em um modal..."... "pegar" oq? O primeiro parágrafo da sua pergunta tá muito confuso.
    – Sam
    Commented 12/12/2018 às 16:36

1 Resposta 1

3

Crie um evento click e pegue os valores de cada coluna usando td:eq(), onde td:eq(0) é a primeiro coluna, td:eq(1) a segunda e assim por diante

O evento você pega pelo atributo [data-idparcela] que todos os <a> dos ícones possuem em comum:

$("[data-idparcela]").on("click", function(){
   
   // pega a linha do ícone clicado
   var t = $(this).closest("tr");
   
   var documento = t.find("td:eq(0)").text();
   var valor = t.find("td:eq(1)").text();
   var vencimento = t.find("td:eq(2)").text();
   
   console.log(documento, valor, vencimento);
   
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<table class="table table-sm table-bordered table-responsive">
    <thead>
        <tr>
            <th>Documento</th>
            <th>Vlr Programado</th>
            <th>Dt Vencto</th>
            <th colspan="2" class="text-center">Ações</th>
        </tr>
    </thead>
    <tbody><tr>
            <td>FR212</td>
            <td>500</td>
            <td>2019-01-18</td>
            <td align="center">
                <a id="omdleditreceita" data-idparcela="3"><i class="fas fa-edit"></i></a>
            </td>
        </tr>
        <tr>
            <td>FR212</td>
            <td>500</td>
            <td>2019-02-17</td>
            <td align="center">
                <a id="omdleditreceita" data-idparcela="4"><i class="fas fa-edit"></i></a>
            </td>
        </tr>
    </tbody><tbody>
        <tr>
            <td colspan="9" align="center">
                <div class="pagination-wrap">
                    <ul class="pagination"><li><a href="/sistema/instancias/receita/add-data.php?page_no=1" style="color:red;">1</a></li></ul>                                                </div>
            </td>
        </tr>
    </tbody>
</table>

Com as variáveis alimentadas, você pode jogar para dentro da modal. Como você não mostrou a modal a nem informou como quer que essas informações apareçam nela, aí não tem como dizer mais além disso.

6
  • 1
    Valeu, muito obrigado, não iria conseguir resolver senão fosse esse exemplo, ainda não tinha visto essa forma, valeu mesmo. No modal eu só quero exibir esses dados, só pega o input HTML e atribui o valor retornado nesse caso o valor de vencimento e os demais.
    – JB_
    Commented 12/12/2018 às 19:26
  • 1
    De nada colega! Boa sorte aí nos seus projetos!
    – Sam
    Commented 12/12/2018 às 19:27
  • sabe seé possivél pegar o valor individual de cada td sem ser clicando na linha?
    – JB_
    Commented 13/12/2018 às 9:20
  • Eu preciso somar as duas linhas para verificar se bate com o valor original, pesquisei bastante e tentei aqui diversas formas mais não conseguir uma solução.
    – JB_
    Commented 13/12/2018 às 9:28
  • Mas vc quer somar na hora do click ou quando carrega a página?
    – Sam
    Commented 13/12/2018 às 14:46

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 .