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) ;
});
This question is related to
jquery
select
html-table
$(".hit").click(function(){
var values = [];
var table = $(this).closest("table");
table.find("tr").each(function() {
values.push($(this).find("td:first").html());
});
alert(values);
});
You should avoid $(".hit")
it's really inefficient. Try using event delegation instead.
If you need to get all td's inside tr without defining id for them, you can use the code below :
var items = new Array();
$('#TABLE_ID td:nth-child(1)').each(function () {
items.push($(this).html());
});
The code above will add all first cells inside the Table into an Array variable.
you can change nth-child(1) which means the first cell to any cell number you need.
hope this code helps you.
In the specific case above, you could do parent/child juggling.
$(this).parents("tr").children("td:first").text()
Install firebug and use console.log
instead of alert
. Then you will see the exact element your accessing.
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.
Source: Stackoverflow.com