Using jQuery in table to display single cell contents of selected row outside of table

This is essentially my table inside of a loop:

<table id="tblMyTable">
  <tr>
     <td><%= attachment.Name %></td>
     <td><%= attachment.Description %></td>
     <td>
        <a id="clickPreview" href="#">Preview</a>
        <div id="divAttachmentContents" style="display:none;"> <%= attachment.ContentsAsHtml %>
        </div>
     </td>
   </tr>
</table>

From this I get multiple rows with data. I want to have a preview button开发者_StackOverflow中文版 on the end of the row, the last column, that will 'preview' the contents in a div further down the page. I assumed I should render out the content to a hidden cell to make it appear quickly.

I need to know how to tell jQuery the row I'm on - and to fetch the text of the last cell.

The gist of what I need is:

    $('#clickPreview').click(function () {
        var newContent = $('#divAttachmentContents').text();
        $('#divAttachmentPreview').html(newContent);
    });

But that only works on the first row. I may have to do something like

<div id="<%= "divAttachmentContents_" + attachment.Id %>" style="display:none;"> <%= attachment.ContentsAsHtml %> </div>

But I'm not sure. This may be similar to This question Any assistance would be greatly appreciated!

You can assign a class for the anchor. That will make the job easier. For e.g.

$('.clickPreviewClass').click(function () {
    var newContent =$(this).next("div").text();
    $('#divAttachmentPreview').html(newContent);
});

assuming clickPreviewClass is the name of the class you give your anchor.