I am trying to get the value of first td in each tr when a users clicks "click".
The result below will output aa ,ee or ii. I was thinking about using closest('tr').. but it always output "Object object". Not sure what to do on this one.
My html is
<table>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
<td><a href="#" class="hit">click</a></td>
</tr>
<tr>
<td>ee</td>
<td>ff</td>
<td>gg</td>
<td>hh</td>
<td><a href="#" class="hit">click</a></td>
</tr>
<tr>
<td>ii</td>
<td>jj</td>
<td>kk</td>
<td>ll</td>
<td><a href="#" class="hit">click</a></td>
</tr>
</table>
Jquery
$(".hit").click(function(){
var value=$(this).// not sure what to do here
alert(value) ;
});
I would start by having your listener for the click a bit more specific so its not triggering on any click on the entire table. Then you were very close by getting the tr , from there you can pass the tr into the del function and use getElementsByTagName on the tr to return the first td from the tr .
$(this). closest('tr'). children('td:eq(0)'). text();
$(this).parent().siblings(":first").text()
parent
gives you the <td>
around the link,
siblings
gives all the <td>
tags in that <tr>
,
:first
gives the first matched element in the set.
text()
gives the contents of the tag.
This should work:
$(".hit").click(function(){
var value=$(this).closest('tr').children('td:first').text();
alert(value);
});
Explanation:
.closest('tr')
gets the nearest ancestor that is a <tr>
element (so in this case the row where the <a>
element is in)..children('td:first')
gets all the children of this element, but with the :first
selector we reduce it to the first <td>
element..text()
gets the text inside the elementAs you can see from the other answers, there is more than only one way to do this.
In the specific case above, you could do parent/child juggling.
$(this).parents("tr").children("td:first").text()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With