Jquery - get td element in table

Question

I would like to click on the anchor tag (href) in the table and extract the contents of the next cell (or any cell defined in this row)

$(".clCode").click(function(){
    alert( $(this).text() );
    return false;
});

<table>
<tr>
<td class='clCode'><a href="#">Select</a></td><td>Code123</td>
</tr><tr>
<td class='clCode'><a href="#">Select</a</td><td>Code543</td>
</tr><tr>
<td class='clCode'><a href="#">Select</a</td><td>Code987</td>
</tr>
</table>

Answer 1

$(".clCode").click(function(){
    alert( $(this).parent().next().text() );
    return false;
});

This should get the next td. You can also pass the next () selector if there are more tds, and you want to get something different from the first.

$(".clCode").click(function(){
    alert( $(this).parent().next(':last').text() );
    return false;
});

Answer 2

Getting text from the following cell is pretty simple:

$("td.clCode a").click(function(e){
  e.preventDefault();
  var nextText = $(this).parent().next().text();
});

Getting text from another cell can be done by its index in the adjacent table-table:

$("td.clCode a").click(function(e){
  e.preventDefault();
  // Get text from fourth table-cell in row.
  var cellText = $(this).closest("tr").find("td:eq(3)").text();
});

Answer 3

$("td.clCode a").click(function() {
  var code = $(this).parent().next().text();
  alert(code);
  return false;
});

Answer 4

$(".clCode a").click(function() {
    alert($(this).parent().next().html();
    return false; // optional
});

I think your HTML markup is a bit redundant.

Answer 5

you can use the jquery next () function to get a list of siblings:

$(".clCode").click(function(){
    tmp = $(this).next()[0];
    alert($(tmp).text());
});