Question

I have a 10 X 8 table.

every row has 8 columns ie.., 8 td elements. Each td in the row has a different class. Is it possible to get the info of 1st td element in the row, when i click on any of the other td’s in the row.

Basically i am creating a jquery onclick event on the column 2 to column 8 of each row. When i click on any of this column(td) it should get the info ie.., either id or class or name attribute of the column 1. I needs this one to send it on the server side code.

—
Thanks.

Answer 1

Yes. From the clicked element, you navigate up to the row via closest, and then you can find the td with the relevant class with find or children (probably children in case you have nested tables):

function clickHandler(e) {
    var cell = $(e.target).closest('tr').children('td.foo');
    // ...
}

Or if you always want the first td:

var cell = $(e.target).closest('tr').children('td').first();

That handler will work if it’s assigned to any td in the table, to the tr, or indeed to the tbody or table as a whole.

Live Example | Source

JavaScript:

jQuery(function($) {

  // Put the handler on the tbody
  $("#target").click(clickHandler);

  function clickHandler(e) {
    var td = $(e.target).closest('tr').children('td').first();
    display("The text of the first <code>td</code> in that row is: " + td.text());
  }

  function display(msg) {
    $("<p>").html(String(msg)).appendTo(document.body);
  }

});

HTML:

<table>
  <tbody id="target">
  <tr>
    <td class="one">This is one in row 0</td>
    <td class="two">This is two in row 0</td>
    <td class="three">This is three in row 0</td>
  </tr>
  <tr>
    <td class="one">This is one in row 1</td>
    <td class="two">This is two in row 1</td>
    <td class="three">This is three in row 1</td>
  </tr>
  <tr>
    <td class="one">This is one in row 2</td>
    <td class="two">This is two in row 2</td>
    <td class="three">This is three in row 2</td>
  </tr>
  </tbody>
</table>