Take value from an attribute in td

Question

I have a dynamic table where there are 9 columns
In one of the last columns there is a button disapproval, and when I click on it, I wanted to take the name that is inside a td in the same tr dynamically.

SCRIPT

    $(document).on("click", ".btn-danger", function(){
        var nomePessoa = $(this).parent().parent().find("td").attr("nomePessoa");
        alert(nomePessoa);
    });

TABLE

Answer 1

To use a "custom" attribute you must use the data-, set an example for you to understand better.

HTML

<table>
    <tr>
        <td data-nome="Lorem Ipsum">Nome attr data-</td>
        <td><button class="btn-danger">Recuperar nome</button></td>
    </tr>
</table>

Note that I created the attribute data-nome will be where we store the name to capture later with Jquery (code below).

Jquery

$(function(){
    $(document).on('click', '.btn-danger', function(e) {
        e.preventDefault;
        var nome = $(this).closest('tr').find('td[data-nome]').data('nome');
        alert(nome);
    });
});

Credits to Sergio (code optimization)

You can see the example working on this DEMO

Answer 2

I was able to solve by placing instead of an attribute, a class called "name" in the td with the person information. The code is as follows:

    $(document).on("click", ".btn-danger", function(){
        var nomePessoa = $(this).parent().parent().find(".nome").text();
        alert(nomePessoa);
    });

Answer 3

I suggest using the .closest('tr') to climb the DOM to the <tr> and then use the .find('td[nomePessoa]) to find only tdwith an attribute "appName".

Thus:

$(document).on("click", ".btn-danger", function () {
    var nomePessoa = $(this).closest('tr').find('td[nomePessoa]').attr('nomePessoa');
    alert(nomePessoa);
});

I also leave a advice, which is a standard adopted in the community, use fields data-. So your HTML code would be <td data-nomePessoa="Antonio" ... etc and in javascript/jQuery .data('nomePessoa')instead of .attr('nomePessoa')

Answer 4

I liked the reply of Diego Vieira(+1) because I did not know this attribute date-something that can be created.

However, I went a different way, because I saw that the name was already written inside the td and I tried to catch it with innerHTML. I could not with the code used because it is a Jquery object and is not so with .innerHTML that works with Jquery. Jquery creates an encapsulation for content that is different from using elemento = document.getElementById("iddoelmento");.

Then a curiosity arose: How could I get the names of properties and methods of objects of any nature, whether jquery or not? I discovered the existence of Object.getOwnPropertyNames(nomedoobjeto) when searching Stack Overflow in English.

In the test in question the object located with Jquery had the following properties: 0,1,length,prevObject,context,selector

I started testing 0 and it was the element I needed. tdobj[0].innerHTML returns the contents of the located cell.

I would like to share the experience, follow the executable code below.

$(function(){
    $(document).on('click', '.btn-danger', function(e) {
        e.preventDefault;
        //tdobj = $(this).parent().parent().find('td');
        tdobj = $(this).closest('tr').find('td');

        // lalala = Object.getOwnPropertyNames(tdobj);
	    // alert(lalala);
        //  0,1,length,prevObject,context,selector


        alert("[0]: "             + tdobj[0]);
        alert("[0].innerHTML:\n"  + tdobj[0].innerHTML);

        alert("[1]: "             + tdobj[1]);
        alert("[1].innerHTML:\n"  + tdobj[1].innerHTML);

        alert("length: "     + tdobj["length"]);

        alert("prevObject: " + tdobj["prevObject"]);

        alert("context: "    + tdobj["context"]);

        alert("selector: "   + tdobj["selector"]);

  
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <tr>
        <td>Teste Nome do Cara</td>
        <td><button class="btn-danger">Recuperar nome</button></td>
    </tr>
</table>

Reference: https://stackoverflow.com/questions/2257993/how-to-display-all-methods-of-an-object-in-javascript?answertab=active#tab-top

Answer 5

I managed to return the result in a simpler way.

determines an id within each and uses the . text function().

var sizePath = $("#sizePath"). text();

Valor.

It worked for me here! Good Luck.