jQuery を使用して他人の HTML を美化する

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

  •  09-06-2019
  •  | 
  •  

質問

表示する必要がある HTML ベースのレポートを作成するサードパーティ アプリがあります。私は持っている いくつかの 見た目はコントロールできますが、一般的にはかなり原始的です。私 できる ただし、JavaScript を挿入します。jQuery の優れた点をいくつか注入して、整理してみたいと思います。私がやりたい具体的なことの 1 つは、常に 1 つの行と可変数の列を含むテーブル (実際の HTML <table>) を取得し、それを魔法のようにタブ付きビューに変換することです。必要に応じて ID を指定できます)、元のテーブルの各セルはタブ付きビューのシートを表します。良いものが見つかりませんでした（読んでください：simple) このようなアイテムの親子化の例があるため、どこから始めればよいかわかりません。誰かがこれを試す方法についてヒントを提供してもらえますか?

役に立ちましたか？

解決

次のような 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 コードは、テーブルのセルをタブに変換します (FF 3 および 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();
});

これを機能させるために、次のjQueryファイルを参照しました。

  • jquery-最新.js
  • ui.core.js
  • ui.tabs.js

そして、flora.all.css スタイルシートを参照しました。基本的にヘッダーセクションを jQueryタブの例

他のヒント

jQuery を使用してこれを行うこともできますが、追加のメンテナンスが悪夢になる可能性があります。ソースが変更されると回避策も変更されるため、これや画面スクレイピングを実行しないことをお勧めします。

確かにそれは可能だと思われます。jQuery.append と jQuery.fadeIn および fadeOut を組み合わせれば、素敵な小さなタブ付きコントロールを作成できるはずです。

に基づいてタブのセットを作成する簡単な方法については、「JQuery UI/タブ」を参照してください。 <ul> 要素とセット <div>'s: http://docs.jquery.com/UI/Tabs

また、追加のスタイルシートを挿入し、それを使用して醜い要素の表示/非表示やスタイル設定を行うことをお勧めします。

HTML の美化はそれほど単純なプロセスではありません。タグ間のすべての改行がテキスト ノードであり、任意の美化によってテキスト ノードが作成および削除されるため、文書構造やコンテンツに悪影響を与える可能性があります。これらの条件をすべて考慮したプログラムを使用することをお勧めします。 http://prettydiff.com/?m=beautify

あなたは HTML Tidy のような HTML クリーンアップには興味がなく、静的 HTML コンポーネント (例:タブ付きインターフェースでの静的テーブルの回転)。

ここでのいくつかの返信はすでにヒントを提供しています。Jquery Tabsを使用していますが、回答のHTML書き換えアプローチは好きではありません。

私の意見では、次のように JQuery セレクターを使用して必要なテーブル セルのコンテンツを抽出する方が良いでしょう。 

var mycontent = $('table tr[:first-child]').find('td[:first-child]').html()

次に、プログラムでタブを作成することで、このデータを JQuery UI プラグインにフィードできます。

$('body').append($('<div></div>').attr('id','mytabs'));
$('#mytabs').tabs({}); //specify tab preferences here
$('#mytabs').tabs('add',mycontent);
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top