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

Question

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 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!

true - I wasn't thinking...thanks for the point. I will have many rows, which is why this is a challenge. — The Mirage
– The Mirage, Commented Jun 2, 2011 at 15:21

Sang Suantak · Accepted Answer · 2011-06-02 14:50:47Z

3

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.

answered Jun 2, 2011 at 14:50

Sang Suantak

5,2652 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

The Mirage Over a year ago

ended up using $('.clickPreview').click(function () { var newContent = $(this).next(".divAttachmentContents").text(); $('#divAttachmentPreview').html(newContent); }); and adding classes instead of ID's. Thanks for the clarification.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related