html table, getting text value of first column relative to the row I clicked

Question

So I have a table and i am trying to get the value of the first column based on the row I clicked. I tried this

$("#divid").on("click", ".tableid", function(){

  alert($(this).find('td:first').text());

});

But it always gives me the first row and first column of my table. How can I fix this?

Thanks

Answer 1

The issue is you are selecting the table ".tableid" instead of the clicked row, so the further reference $(this) will be the whole table instead of the clicked row. You have to replace ".tableid" with ".tableid tr".

Here's the correct example https://jsfiddle.net/nf76rxyq/2/

Html

<div id="divid">
    <table class="tableid">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</div>

Javascript

$(document).ready(function() {
    $("#divid").on("click", ".tableid tr", function() {
        alert($(this).find('td:first').text());
    });
});