表示する必要があるHTMLベースのレポートを作成するサードパーティのアプリケーションがあります。私はいくつかの見た目をコントロールしていますが、一般的にはかなりプリミティブです。私はすることができますしかし、いくつかのジャバスクリプトを注入する。私はそれをいくつか整理するためにいくつかのjQueryの良さを注入しようとしたいと思います。 1つの具体的なことは、常に1つの行と可変数の列を含むテーブル（実際のHTML <テーブル>）をとり、内容を（常に1つの<div>必要に応じてIDを提供することができます）は、元の各表セルのタブ付きビューのシートを表します。私はこのような再育てることの良い（読んだ：シンプルな）例を見つけていないので、どこから始めるべきかわからない。誰かが私がこれをどうやって試すかもしれないかについていくつかのヒントを与えることができますかjQueryを使用して誰かの他の人を美しくする
、このようにHTMLページを考える：
<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/>
次のjQueryのコードは、私はfollを参照、これは仕事を得るために
$(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();
});
（FF 3およびIE 7で試験された）タブに表のセルを変換しますjQueryのファイルに
を起因と私はflora.all.cssスタイルシートを参照。基本的に私はヘッダセクションをコピーしましたjQuery tab example
これはjQueryで行うことができますが、追加の保守が悪夢になる可能性があります。私はこれを行うことをお勧めします/スクリーンスクレイピングので、ソースが変更された場合は、あなたの回避策です。
これは確かに可能です。 jQuery.appendとjQuery.fadeInとfadeOutを組み合わせると、小さなタブ付きのコントロールを作成することができます。
<ul>要素と<div>'sのセットに基づいてタブのセットを作成するための簡単な方法のためのjQueryのUI /タブを参照してください：http://docs.jquery.com/UI/Tabs
また、追加のスタイルシートを注入して、醜い要素の表示/非表示とスタイルを使用することをお勧めします。
HTMLクリーンアップには興味がありませんが、静的HTMLコンポーネントのインタラクティブな機能強化（タブ付きインターフェースでの静的な表の回転など）があります。
いくつかの返信は、既にヒントを示しています。 Jqueryのタブを使用して、私は彼らの答えにHTML書き換えのアプローチが好きではありません。
私見その方が好き、jQueryのセレクタをしたいテーブルのセルの内容を抽出するには：あなたは、プログラムのタブを作成することによって、jQueryのUIプラグインにこのデータを送ることができます
var mycontent = $('table tr[:first-child]').find('td[:first-child]').html()
：
$('body').append($('<div></div>').attr('id','mytabs'));
$('#mytabs').tabs({}); //specify tab preferences here
$('#mytabs').tabs('add',mycontent);
タグ間のすべての改行がテキストノードであり、任意の美化が文書構造に有害であり、コンテンツに有害な可能性のある方法でテキストノードを作成して削除するため、Beautifying HTMLは単純なプロセスではありません。 http://prettydiff.com/?m=beautify
まあ、私は特定のID属性をレンダリングされる特定のページ要素に注入でき、それ以外の点ではHTMLソースが変更されることはないことを知っています意味のある方法。あなたは良い点がありますが、この特定のサードパーティのアプリでは、この側面は比較的安全だと思います。 –