How to get value from a cell in a row when a certain row is selected

Question

I created the html and javascript to get the id of a row that contains different information for example I'll create a table below.

id-----firstname ---- lastname ------- product
1------Jon ---------------Doe ------------- Apple
2 ---- Jane ------------- Doe ------------- Banana

When I click on the row I want that rows id to be selected. I have the following code

alert(document.getElementById("id").value);

alert($(this).getElementbyId("id").value);//this line doesnt work

The first line will always come out to 1. Or the id that is in the first field. The second line doesn't do anything. Any help would be appreciated.

Thank you

---

Some HTML that is outputted

<table border=1 style="border-collapse: collapse">

<tr class='clickablerow'>
<td><textarea readonly cols='4' rows='1' id='id'>356</textarea></td> 
<td><textarea cols='20' rows='1' name='lastname'>Johnson</textarea></td> 
<td><textarea cols='20' rows='1' name='firstname'>Jon</textarea></td> 
<td><textarea cols='5' rows='1' name='room'>58B</textarea></td> 
<td><textarea cols='20' rows='1' name='product'>HP printer</textarea></td> 
<td><textarea cols='20' rows='1' name='problem'>lid is missing a part</textarea></td> 
<td><textarea cols='20' rows='1' name='finished'>5/16/2013</textarea></td> 
<td><textarea cols='20' rows='1' name='comments'>Fixed working now</textarea></td> 
</tr>
<tr class='clickablerow'><td><textarea readonly cols='4' rows='1' id='id'>429</textarea></td> 
<td><textarea cols='20' rows='1' name='lastname'>Harrison</textarea></td> 
<td><textarea cols='20' rows='1' name='firstname'>Wendy</textarea></td> 
<td><textarea cols='5' rows='1' name='room'>101</textarea></td> 
<td><textarea cols='20' rows='1' name='product'>Internet</textarea></td> 
<td><textarea cols='20' rows='1' name='problem'>Internet not working</textarea></td>
 <td><textarea cols='20' rows='1' name='finished'>5/24/2013</textarea></td> 
<td><textarea cols='20' rows='1' name='comments'>Need to change DNS</textarea></td>
 </tr>

Answer 1

Change the table row to something like this:

<tr class='clickablerow'><td><textarea readonly cols='4' rows='1' class='id'>".$row['id']."</textarea></td>...</tr>

Use class="id" instead of id="id" , because you can't repeat IDs.

Then your JS code can be:

$("tr.clickablerow").click(function() {
    alert ($(this).find("textarea.id").val());
});

$(this).getElementById("id").value doesn't work because $(this) returns a jQuery object, not a DOM element. jQuery objects don't implement the same methods as DOM elements.

Answer 2

I am not sure if using jQuery is an option for you - but writing this down fairly quickly:

$("tr").click(function() {
     var currentID = $(this).attr("id");
     alert(currentID);
});

Explanation: $("tr").click() - you are binding the click event to each <tr> element on your page (if you don't want every tr element to be bound to this event, you can add a class name to those you want to have triggered and use $("tr.myClassName").click() )

$(this).attr("id") - $(this) refers to the element clicked. .attr("id") gets the tr's attribute value (in this case the "id" of the html element).

Hope that helps.

UPDATE:

I see that I have not understood the question clearly - thank you for bringing it to my attention - here is the amended sample:

$("tr").click(function() {
         var currentID = $("td textarea", this).val();
         alert(currentID);
});