2

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

4

6 に答える 6

4

次のような 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-latest.js
  • ui.core.js
  • ui.tabs.js

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

于 2008-09-16T20:53:38.900 に答える
0

HTMLの美化は、それほど単純なプロセスではありません。タグ間のすべての改行はテキストノードであり、任意の美化は、ドキュメント構造に害を及ぼし、コンテンツに害を及ぼす可能性のある方法でテキストノードを作成および削除するためです。http://prettydiff.com/?m=beautifyなど、これらすべての条件をすでに検討しているプログラムを使用することをお勧めします。

于 2011-11-26T13:17:31.063 に答える
0

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

于 2008-09-10T14:14:24.010 に答える
0

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

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

于 2008-09-10T14:28:04.900 に答える
0

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);
于 2009-07-07T10:35:55.580 に答える