<p>I have a third-party app that creates HTML-based reports that I need to display.  I have <em>some</em> control over how they look, but in general it's pretty primitive.  I <em>can</em> 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 &lt;table&gt;) that always contains one row and a variable number of columns and magically convert that into a tabbed view where the contents (always one &lt;div&gt; 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?</p>

[{'answer_id': 54145, 'author': 'Ryan Lanciaux', 'author_id': 1385358, 'author_profile': 'https://Stackoverflow.com/users/1385358', 'pm_score': 0, 'selected': False, 'text': '<p>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.</p>\n'}, {'answer_id': 54190, 'author': 'samjudson', 'author_id': 1908, 'author_profile': 'https://Stackoverflow.com/users/1908', 'pm_score': 0, 'selected': False, 'text': '<p>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.</p>\n\n<p>See the JQuery UI/Tabs for a simple way to create a set of tabs based on a <code>&lt;ul&gt;</code> element and a set of <code>&lt;div&gt;\'s</code>: <a href="http://docs.jquery.com/UI/Tabs" rel="nofollow noreferrer">http://docs.jquery.com/UI/Tabs</a></p>\n'}, {'answer_id': 76943, 'author': 'Rich McCollister', 'author_id': 9306, 'author_profile': 'https://Stackoverflow.com/users/9306', 'pm_score': 3, 'selected': True, 'text': '<p>Given a html page like this:</p>\n\n<pre><code>&lt;body&gt;&lt;br/&gt;\n    &lt;table id="my-table"&gt;`&lt;br/&gt;\n        &lt;tr&gt;&lt;br/&gt;\n            &lt;td&gt;&lt;div&gt;This is the contents of Column One&lt;/div&gt;&lt;/td&gt;&lt;br/&gt;\n            &lt;td&gt;&lt;div&gt;This is the contents of Column Two&lt;/div&gt;&lt;/td&gt;&lt;br/&gt;\n            &lt;td&gt;&lt;div&gt;This is the contents of Column Three&lt;/div&gt;&lt;/td&gt;&lt;br/&gt;\n            &lt;td&gt;&lt;div&gt;Contents of Column Four blah blah&lt;/div&gt;&lt;/td&gt;&lt;br/&gt;\n            &lt;td&gt;&lt;div&gt;Column Five is here&lt;/div&gt;&lt;/td&gt;&lt;br/&gt;\n        &lt;/tr&gt;&lt;br/&gt;\n    &lt;/table&gt;&lt;br/&gt;\n&lt;/body&gt;&lt;br/&gt;\n</code></pre>\n\n<p>the following jQuery code converts the table cells into tabs (tested in FF 3 and IE 7)</p>\n\n<pre><code>$(document).ready(function() {\n    var tabCounter = 1;\n    $("#my-table").after("&lt;div id=\'tab-container\' class=\'flora\'&gt;&lt;ul id=\'tab-list\'&gt;&lt;/ul&gt;&lt;/div&gt;");\n    $("#my-table div").appendTo("#tab-container").each(function() {                    \n        var id = "fragment-" + tabCounter;\n        $(this).attr("id", id);\n        $("#tab-list").append("&lt;li&gt;&lt;span&gt;&lt;a href=\'#" + id + "\'&gt;Tab " + tabCounter + "&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;");\n        tabCounter++;\n    });\n    $("#tab-container &gt; ul").tabs();\n});\n</code></pre>\n\n<p>To get this to work I referenced the following jQuery files</p>\n\n<ul>\n<li>jquery-latest.js</li>\n<li>ui.core.js</li>\n<li>ui.tabs.js</li>\n</ul>\n\n<p>And I referenced the flora.all.css stylesheet.  Basically I copied the header section from the <a href="http://docs.jquery.com/UI/Tabs#Example" rel="nofollow noreferrer">jQuery tab example</a> </p>\n'}, {'answer_id': 892348, 'author': 'Tom', 'author_id': 45350, 'author_profile': 'https://Stackoverflow.com/users/45350', 'pm_score': 0, 'selected': False, 'text': '<p>I would also suggest injecting an additional stylesheet and use that to show/hide and style ugly elements.</p>\n'}, {'answer_id': 1091573, 'author': 'fbuchinger', 'author_id': 113936, 'author_profile': 'https://Stackoverflow.com/users/113936', 'pm_score': 0, 'selected': False, 'text': "<p>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).</p>\n\n<p>Some replies here already gave you hints, e.g. using Jquery Tabs, but i don't like the HTML rewrite approach in their answers.</p>\n\n<p>IMHO its better to extract the content of the table cells you want with a JQuery selector, like: </p>\n\n<pre><code>var mycontent = $('table tr[:first-child]').find('td[:first-child]').html()\n</code></pre>\n\n<p>then you can feed this data to the JQuery UI plugin by programmatically creating the tabs:</p>\n\n<pre><code>$('body').append($('&lt;div&gt;&lt;/div&gt;').attr('id','mytabs'));\n$('#mytabs').tabs({}); //specify tab preferences here\n$('#mytabs').tabs('add',mycontent);\n</code></pre>\n"}, {'answer_id': 8278645, 'author': 'austincheney', 'author_id': 1065429, 'author_profile': 'https://Stackoverflow.com/users/1065429', 'pm_score': 0, 'selected': False, 'text': '<p>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 <a href="http://prettydiff.com/?m=beautify" rel="nofollow">http://prettydiff.com/?m=beautify</a></p>\n'}]
['https://Stackoverflow.com/questions/54138', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/404/']