Using jQuery to beautify someone else's html

StackOverflow https://stackoverflow.com/questions/54138

  •  09-06-2019
  •  | 
  •  

Question

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?

Was it helpful?

Solution

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

OTHER TIPS

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

I would also suggest injecting an additional stylesheet and use that to show/hide and style ugly elements.

Beautifying HTML is not such a simple process, because every line break between tags is a text node and arbitrary beautification creates and removes text nodes in manner that could be harmful to the document structure and likely harmful to the content. I recommend using a program that has already thought all these conditions through, such as http://prettydiff.com/?m=beautify

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);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top