Question

I am using jquery datatables for html table generation. I setup a callback to create an additional column for links (edit, delete, etc…).

I setup a bind function to detect clicks, which is working.

The problem I am having is selecting the text/value of the first column on the closest row when it is clicked.

Here is the snippet that binds to the class and detects a click.

$(".drop").bind('click', function(e)  
{  
   var val = $(e.target).closest('td:first').text();  
   alert(val);                             
});

HTML Table Body After Generation

<tbody>
            <tr class="odd">
                <td>[e-mail]</td>

                <td>[e-mail]</td>

                <td>1000012342015292781</td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="even">
                <td>[e-mail]</td>

                <td></td>

                <td></td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="odd">
                <td></td>

                <td>[e-mail]</td>

                <td>1734001234268</td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="even">
                <td>[e-mail]</td>

                <td></td>

                <td></td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="odd">
                <td></td>

                <td>[e-mail]</td>

                <td>10000201142345292781</td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="even">
                <td>[e-mail]</td>

                <td></td>

                <td></td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="odd">
                <td>[e-mail]</td>

                <td></td>

                <td></td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="even">
                <td>[e-mail]</td>

                <td>[e-mail]</td>

                <td>100000723143211905</td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="odd">
                <td>[e-mail]</td>

                <td></td>

                <td></td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>

            <tr class="even">
                <td></td>

                <td>[e-mail]</td>

                <td>8197906212343</td>

                <td><a href="#" class="drop">Delete</a></td>
            </tr>
        </tbody>

Answer 1

This should do it:

var val = $(e.target).closest('td').siblings(':first-child').text();  

Live demo: http://jsfiddle.net/simevidas/JZwxD/