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?
You could do this with jQuery but it may make additional maintenance a nightmare. I would recommend against doing this / screen scraping because if the source ever changes so does your work around.
This certainly sounds possible. With a combination of jQuery.append and jQuery.fadeIn and fadeOut you should be able to create a nice little tabbed control.
See the JQuery UI/Tabs for a simple way to create a set of tabs based on a <ul> element and a set of <div>'s: http://docs.jquery.com/UI/Tabs
Given a html page like this:
<body>
<table id="my-table">
<tr>
<td><div>This is the contents of Column One</div></td>
<td><div>This is the contents of Column Two</div></td>
<td><div>This is the contents of Column Three</div></td>
<td><div>Contents of Column Four blah blah</div></td>
<td><div>Column Five is here</div></td>
</tr>
</table>
</body>
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
I would also suggest injecting an additional stylesheet and use that to show/hide and style ugly elements.
Sounds like you are not interested in a HTML cleanup as HTML Tidy does, but in an interactive enhancement of static HTML components (e.g. turning a static table in a tabbed interface).
Some replies here already gave you hints, e.g. using Jquery Tabs, but i don't like the HTML rewrite approach in their answers.
IMHO its better to extract the content of the table cells you want with a JQuery selector, like:
var mycontent = $('table tr[:first-child]').find('td[:first-child]').html()
then you can feed this data to the JQuery UI plugin by programmatically creating the tabs:
$('body').append($('<div></div>').attr('id','mytabs'));
$('#mytabs').tabs({}); //specify tab preferences here
$('#mytabs').tabs('add',mycontent);