Get value of an attribute in td

10

I have a PivotTable where there are 9 columns
In one of the last columns there is a disapproval button , and when I click it, I want to get the name is in 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

    
asked by anonymous 24.07.2014 / 15:31

5 answers

10

To use a "custom" attribute you should use data- , I've put 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 data-nome attribute where we will 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 in this DEMO

DEMO     
25.07.2014 / 13:48
2

I was able to solve by putting instead of an attribute, a class called "name" in td with the person information. The code looks like this:

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

I suggest using .closest('tr') to go up in the DOM up to <tr> and then use .find('td[nomePessoa]) to find only td with an attribute "nomePessoa".

So:

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

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

    
25.07.2014 / 17:27
0

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

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

Then I had a curiosity: How could I get the names of properties and methods of objects of any kind, whether jquery or not? I discovered Object.getOwnPropertyNames(nomedoobjeto) when searching for 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 by testing 0 and it was the element I needed. tdobj[0].innerHTML returns the contents of the localized 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>TesteNomedoCara</td><td><buttonclass="btn-danger">Recuperar nome</button></td>
    </tr>
</table>

Reference: link

    
25.01.2017 / 13:34
-1

I was able to return the result in a simpler way.

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

06.05.2017 / 20:38