Home/ Questions/Q 45659
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T15:50:38+00:00

I have a third-party app that creates HTML-based reports that I need to display.

  • 0

I have a third-party app that creates HTML-based reports that I need to display. I have some control over how they look, but in general it’s pretty primitive. I can inject some javascript, though. I’d like to try to inject some jQuery goodness into it to tidy it up some. One specific thing I would like to do is to take a table (an actual HTML <table>) that always contains one row and a variable number of columns and magically convert that into a tabbed view where the contents (always one <div> that I can supply an ID if necessary) of each original table cell represents a sheet in the tabbed view. I haven’t found any good (read: simple) examples of re-parenting items like this, so I’m not sure where to begin. Can someone provide some hints on how I might try this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Given a html page like this:

    <body><br/>     <table id='my-table'>`<br/>         <tr><br/>             <td><div>This is the contents of Column One</div></td><br/>             <td><div>This is the contents of Column Two</div></td><br/>             <td><div>This is the contents of Column Three</div></td><br/>             <td><div>Contents of Column Four blah blah</div></td><br/>             <td><div>Column Five is here</div></td><br/>         </tr><br/>     </table><br/> </body><br/>

    the following jQuery code converts the table cells into tabs (tested in FF 3 and IE 7)

    $(document).ready(function() {     var tabCounter = 1;     $('#my-table').after('<div id='tab-container' class='flora'><ul id='tab-list'></ul></div>');     $('#my-table div').appendTo('#tab-container').each(function() {                             var id = 'fragment-' + tabCounter;         $(this).attr('id', id);         $('#tab-list').append('<li><span><a href='#' + id + ''>Tab ' + tabCounter + '</a></span></li>');         tabCounter++;     });     $('#tab-container > ul').tabs(); });

    To get this to work I referenced the following jQuery files

    • jquery-latest.js
    • ui.core.js
    • ui.tabs.js

    And I referenced the flora.all.css stylesheet. Basically I copied the header section from the jQuery tab example

    • 0