32

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)  ;

});
Prince Prasad
  • 1,528
  • 1
  • 16
  • 20
FlyingCat
  • 14,036
  • 36
  • 119
  • 198

6 Answers6

72
$(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.

Tesserex
  • 17,166
  • 5
  • 66
  • 106
  • Helped me too! I was struggling to get the text from the first td and then found this little gem! Nice! – Venu K Sep 26 '18 at 11:07
46

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 element

As you can see from the other answers, there is more than only one way to do this.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • You all give correct answers! Since you already have 16K and Tesserex replied me first. I will give the accepted answer to Tesserex. Thanks a lot! +1 to u all. – FlyingCat May 28 '10 at 17:50
  • ".children('td:first')" just what I needed. – radbyx Nov 28 '13 at 06:31
13

In the specific case above, you could do parent/child juggling.

$(this).parents("tr").children("td:first").text()
Inaimathi
  • 13,853
  • 9
  • 49
  • 93
  • `closest` only looks for ancestors of the current element. Your second example would not work. And your first example does not work either because `parent()` only traverses on level up in the DOM hierarchy (you maybe mean `parents()`). – Felix Kling May 28 '10 at 17:48
4
$(".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.

Caleb
  • 9,272
  • 38
  • 30
3

Install firebug and use console.log instead of alert. Then you will see the exact element your accessing.

Marc
  • 289
  • 1
  • 3
  • 8
2

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.

Shadmehr Vadoodi
  • 731
  • 7
  • 9