Create a link that when clicked caught your text

Asked

Viewed 738 times

3

I have a table that has the Material ID and the Name, the name is a link, I need to make when I click the link it takes the ID and the name puts it in a text field in the folder.

The table is generated dynamically by a script

$('#tbl').append("<tr class=\"corpoTbl\"> <td class=\"ids\">" + item.ID +
                        "</td><td class=\"nome\"><a href=\"#\" onclick=\"Seleciona()\">" + item.Nome + "<\a></td></tr>")

I’m trying to get the text of the link like this:

function Seleciona(event) {
    var id = event.ID
    var nome = event.Nome

    $('#ID').val(ID);
    $('#nome').val(nome);

    $(this).dialog("close");
}
javascript jquery

  • That code is in need of some corrections. When you do the append you have bad tags, you’re not sending anything to the function Seleciona

  • what I should pass to the Select function?

  • I have already made an answer with the necessary editions

2 answers

3

In the construction of your table you send your item.ID which will define each td (also had some errors in tags):

$('#tbl').append("<tr class=\"corpoTbl\"> <td class=\"ids\" id=\"tdID_" + item.ID +">" + item.ID +
                        "</td><td class=\"nome\" id=\"tdNome_" + item.ID +"><a href=\"#\" onclick=\"Seleciona('"+ item.ID +"')\">" + item.Nome + "</a></td></tr>")

In function Seleciona you get a idlinha which corresponds to your item.ID, in order to retrieve data from id and of nome :

function Seleciona (idlinha) {
    var id = $("#tdID_" + idlinha).html();
    var nome = $("#tdNome_"+idlinha+" a").text();   

    $('#inp_ID').val(id);
    $('#inp_Nome').val(nome);

    $(this).dialog("close");
}

Functional example:

Seleciona = function (idlinha) {
    var id = $("#tdID_" + idlinha).html();
    var nome = $("#tdNome_"+idlinha+" a").text();   

    $('#inp_ID').val(id);
    $('#inp_Nome').val(nome);

    $(this).dialog("close");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
    <tr class="corpoTbl"> 
        <td class="ids" id="tdID_12">12</td>
        <td class="nome" id="tdNome_12">
            <a href="#" onclick="Seleciona(12)">Fernando Trambolho</a>
        </td>
    </tr>
 </table>
<br/>
<input type="text" id="inp_ID"/>
<input type="text" id="inp_Nome"/>

2


My suggestion is that you already preload your link by passing the values to the method Seleciona.

See Working:

   $(function () {
            $('#tbl').append("<tr class=\"corpoTbl\"> <td class=\"ids\">" + 1 +
            "</td><td class=\"nome\"><a href=\"#\" onclick=\"Seleciona('"+1+"',"+ "'Teste')\">" + "Teste" + "<\a></td></tr>")

        });
        function Seleciona(id, nome) {
            $('#ID').val(id);
            $('#nome').val(nome);
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl">
    </table>
    <input type="text" id="ID" />
    <input type="text" id="nome" />

  • and simply. + 1

  • @Cesarmiguel his is well practical tbm. Thank you.

  • In more complex tables it may be better, but for what Alan wants it doesn’t justify :P

Browser other questions tagged javascript jquery

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