select the third column on a click event

Question

I have a Datatable, that renders two imagebuttons in the first two coloumns

<tr>
  <td>Button 1
  <td>Button 2
</tr>
<tr>
  <td>Value<td/>

I'm trying to capture the value for the corresponding click using this:

         $('[id$=releaseMessage]').click(function () {
                alert($('td:eq(2)', this).html());
            });

            $('[id$=deleteMessage]').click(function () {
                alert($('td:eq(2)', this).html());
            });

the Value is different for each row, so I can use something like this:

     tr:eq(0) td:first-child

as this will always return the first td value.

I need to capture the value in the third col for the selected image button. — CSharpNewBee, Apr 09 '13 at 16:01
I only see two columns... could you provide a [jsfiddle](http://jsfiddle.net) of what you currently have? — Dom, Apr 09 '13 at 16:03
basically, when the users select either of the image buttons, the values 37 38 or 97 are returned. — CSharpNewBee, Apr 09 '13 at 16:20

score 0 · Accepted Answer · edited May 23 '17 at 11:49

A few things:

IDs MUST be unique! Use classes instead.
Since both click events do the same thing, combine the two classes in the selector (use a comma). $('.releaseMessage, .deleteMessage').click().
Side Note: I recommend using console.log() rather than alert().

JAVASCRIPT:

$(document).ready(function(){
    $('.releaseMessage, .deleteMessage').click(function(){
        alert($(this).closest('tr').children().eq(2).html());
    });
});

DEMO: http://jsfiddle.net/dirtyd77/tcyuF/3/

EXPLANATION:

$(this) refers to the clicked element (in this case the anchor, a)
.closest() finds the closest tr
.children() gets the children of tr
.eq() identifies the position (using index) of element

Hope this helps and let me know if you have any questions!

select the third column on a click event

1 Answers1