Get first column text from table on onclick function

I’m trying this, but can’t make it happen. I am trying to get the first column text. First column text contains the room Number.

Here is what I have done so far:

$.each(eval(data), function(index, item) {
                $('#data-Tables tbody').append('<tr><td>' + item.ROOM + '</td><td>' + item.GUEST_NAME + '</td><td><a onclick="showDetails(e)" class="actionBtn">Details</a></td></tr>');
            });

I used onclick="showDetails(e)" on a tag, then I defined function on page:

function showDetails(e){
    $(this).text('changebtn text');
}

I get this error on Firebug:

ReferenceError: e is not defined

I also tried without e, I didn’t get the error message on Firebug.

But in both cases the $(this) didn’t work. How can I get the first column data?

I can’t use selector.click because it’s not working. I even tried with document.ready and made many attempts, it’s some kind of problem with gadget.

Is there any way to get the first column data on dynamic table when clicked on button?

Here is the screenshot of my gadget:

Answer

When using onclick in HTML you will not receive a parameter called event or e. So if you remove e from both places you wont get the error.

To find this in your function you could use the following to send the object as a parameter.

HTML

onclick="showDetails(this)"

JS

function showDetails(obj){
   $(obj).text('changebtn text');
}