How to determine from which row a jQuery function is called

Question

I want to collect all data from <td>'s in a certain row. I have limited knowledge about jQuery so I try to work myself through from the more general thing to what I exactly need.

For now I have this simple Example to illustrate what I mean. I create a table dynamically, according to a data from a database so one row may contain from 1 to many <td>..</td> and in each <td> I have an <input../> control that holds some value. The ultimate goal is to be able to let the user edit a given row and then to Update (collect the values from all inputs and send them to the server) the edited data.

As you can see in my JsFiddle example I figured out how to collect all the data using $('td').each(function() but of course this is not what I want. I want only the data from which the getData() function was called. Which leads to the first problem that I can't resolve (at least in a proper way).

What I know is that if nothing else I can give each <tr> some unique id so I can easily select it with jQuery. However since I'm calling the function on click event from anchor inside a <td> of the same row I'm pretty sure that there should be a way to determine the row without giving it unique id and passing it as argument to the getData() function but I couldn't find a way to do it. So is it really possible to determine the row without using special identifier and if so could you help me with the code for the jQuery function to select the row for/from which the getData() funciton was called?

Mister Epic · Answer 1 · 2013-12-29T19:11:03.590

Try this:

$(function(){
    $('a').click(function(e){
        e.preventDefault();
        //Get tr 
        var tr = $(this).parent().parent();
        //Find input
        var input = tr.find('input');
        alert(input.val());
    });
});

You could assign an ID or something to your table as you create it to provide a traversal cue, which would be perfectly valid.

The above is a different solution, whereby each and every anchor gets a handler attached to its click event. What we want to do is a little snooping around the anchor to find the input of interest.

First, we find the grandparent of the link we clicked, which we know will be a table row: var tr = $(this).parent().parent();

Now, we just need to a dig a bit further to find the relevant input using the find() method:

var input = tr.find('input');

So long as your table markup is consistent, you can easily find whatever element you are looking for thanks to jQuery's DOM traversal functions.

http://jsfiddle.net/GzWuP/3/

thank you for the answer. It's working fine but `cytofu` suggestion is closer to my original idea so I'll go this way. Still your explanation was very helpful for me! — Leron, Dec 29 '13 at 19:20
No worries. I would point out that your answer includes burning in javascript code onto your HTML elements, which isn't ideal. It's considered a better practice to attach handlers from an external script file. — Mister Epic, Dec 29 '13 at 19:56

score 1 · Accepted Answer · answered Dec 29 '13 at 19:13

1

you can use .parent() to get the parent. You have to use it twice to get to the tr. change your onclick to :

`onclick="getData(this)"

` and your getData to:

function getData(elem) {
 alert( $(elem).parent().parent().find('input').val() );
};

you can see the result here: http://jsfiddle.net/GzWuP/5/

answered Dec 29 '13 at 19:13

cytofu

873
9
17

Hmm, what is the problem with `$(elem.parentNode).parent()` ? I've just tested it in my original code and I got the expected result, in other words it seems to work. What is the difference? – Leron Dec 29 '13 at 19:18
Its fine, but its weird to mix native Js and Jquery more then neccessary ;) – cytofu Dec 29 '13 at 19:19
I see, thank you for the explanation. And forgive me the noob question but using `this` when I call `onclick="getData(this)" I am actually passing the `` attribute is that right? – Leron Dec 29 '13 at 19:22
yes, that's why you need to use .parent() twice. You could also pass this.parentNode.parentNode here. And leave out the .parent().parent() in getData(). But its more convenient to have the element that was clicked on, in case you want to do anything with it. – cytofu Dec 29 '13 at 19:28

How to determine from which row a jQuery function is called

2 Answers2