Generate dynamic id in html and catch with Jquery

Asked

Viewed 1,080 times

1

I have an HTML table that gets the values from the database. Each row of the table, when clicked on the icon need to take the values of this line and when opening the modal show this information in the modal.

My table: inserir a descrição da imagem aqui

When clicked on this edit icon I need to take the value of the reference line [vlor Scheduled] | [Dt Vencto] | [Document], to display in the modal.

The problem is, as the values of these lines are dynamic I can’t assign a id for <td> to be able to catch it with 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>

Do you have any way of doing this procedure?

php javascript html jquery

  • There are several ways, but I don’t understand exactly what the problem is

  • Your question is unclear but I think I get it. You need to add the event into a fixed element to watch the click from it: $(document).on('click','#btnPrepend',function(){//do something}) https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript

  • Post the JS you tried to do too...

  • Because you’re repeating id’s id="omdleditreceita"? An id is equal CPF, must be unique.

  • "...on each line need to pick up to display on a modal..."... "catch" oq? The first paragraph of your question is very confusing.

  • I edited the question, about the id is repeating is just to exemplify what the browser is rendering. @Sam.

  • @edsonalves saw here this topic but I did not understand it very well.

Show 2 more comments

1 answer

3


Create an event click and take the values of each column using td:eq(), where td:eq(0) is the first column, td:eq(1) the second and so on

The event you take by attribute [data-idparcela] that all the <a> icons have in common:

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

With the variables fed in, you can play inside the modal. Since you have not shown the modal nor reported how you want this information to appear in it, there is no way to say further.

  • 1

    Thanks, thank you very much, I could not solve if it were this example, I had not seen this form yet, thanks. In modal I just want to display this data, just take the HTML input and assign the value returned in this case the maturity value and the others.

  • 1

    You’re welcome, pal! Good luck in your projects!

  • know if it is possible to take the individual value of each td without clicking on the line?

  • I need to add the two lines to check if it matches the original value, I researched a lot and tried here several more ways not to get a solution.

  • But you want to add at click time or when to load the page?

  • Thanks Sam, I got the solution of the sum.

Show 1 more comment

Browser other questions tagged php javascript html jquery

You are not signed in. Login or sign up in order to post.