Generate dynamic id in html and get with JQuery

Question

Generate dynamic id in html and get with JQuery

Navigation

#1 by (3 votes)

1

I have a table in HTML that receives the values coming from the database. Each line of the table, when clicking on the icon I need to pick up the values of this line and when opening the modal show this information in modal.

My table:

WhenIclickonthisediticon,Ineedtogetthevalueofthereferringline[vlorScheduled]|[DtVencto]|[Document],todisplayinthemodal.

Theproblemis,sincethevaluesoftheserowsaredynamicIcannotassignaidto<td>tocatchitwithJS.

<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 to do this?

php javascript html jquery

asked by anonymous 12.12.2018 / 16:45

1 answer

How to dim the size of a Blob image? How to edit HTML in a WYSIWYG editor (TinyMCE) and save in the database?

score 3 · Accepted Answer

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

The event you get by the [data-idparcela] attribute that all <a> of the 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><linkrel="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, you can play into the modal. Since you have not shown the modal and have not reported how you want this information to appear in it, there is no way to say it further.