1

I have a table generated by displaytags and it looks like below.

<tbody>
  <tr class="coldata">
    <td>02063873320</td>
    <td>ORD81268679</td>
    <td>80%</td>
    <td>6</td>
    <td>84070063962913</td>
    <td><img src="xyz"/></td>
  </tr>
  <tr>
    .
    .
    .
  </tr>

Each row has an image in the last cell and when i click on the cell i want to call a Jquery function which will send the 5th cell's value in that row to an action class.

i want to know how to select the 5th cell and function to an action class. Can anyone suggest the selector and function to call action class

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
DJR
  • 454
  • 2
  • 8
  • 29

1 Answers1

1

If the rows all have that coldata class, you can get the fifth cells (index 4) using :eq like this:

var fifthCells = $("tr.coldata td:eq(4)");

...and then hook their click event, and navigate from there:

fifthCells.click(function() {
    var $td = $(this); // The specific `td` that was clicked
    // ...do something with that specific `td`
});

If it's not always the fifth cell but always the one before the last, you can use last-of-type:

var lastCells = $("tr.coldata td:last-of-type").prev('td');

Or if they're the only ones prior to ones with img elements in them:

var cellsWithImages = $("tr.coldata td img").closest("td").prev('td');

...and so on.

Side note: If the contents of the table are dynamic (or arguably even if they aren't), it may be useful to use a delegated handler. Here's the delegated click handler for the fifth td in each row:

// fifthCells
$("table.some-class").on("click", "tr.coldata td:eq(4)" function() {
    // `this` is the DOM element for the td that was clicked
});
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • there are multiple rows and all of them have the coldata class.. if i click on the second row's image, i need to get the 5 th cell in the second row. dosent the above selector select the 5th cell in every row? – DJR Apr 03 '14 at 21:15
  • @DJR: Yes, but then when you're processing the event, you have a reference to the *specific* `td` that was clicked (see update). – T.J. Crowder Apr 03 '14 at 21:16