使用jQuery美化别人的html

Question

我有一个第三方应用程序，创建基于HTML的报告，我需要显示。我对它们的外观有一些控制，但总的来说，它是相当原始的。不过，我可以注入一些javascript。我想试着给它注入一些jQuery的好处，把它整理一下。我想做的一件具体事情是，获取一个始终包含一行和可变列数的表(一个实际的HTML )，并神奇地将其转换为一个选项卡式视图，其中每个原始表单元格的内容(如果需要，可以提供一个ID )表示选项卡式视图中的一个表。我还没有找到像这样的好例子(阅读:简单)，所以我不知道从哪里开始。有人能给我一些提示，让我试试这个吗？

Answer 1

给定这样的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和IE7中进行了测试)

$(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选项卡示例复制了标题部分

Answer 2

您可以使用jQuery完成这一任务，但这可能会使额外的维护变成一场噩梦。我建议不要进行这种/屏幕抓取，因为如果源发生了变化，那么您的工作也会发生变化。

Answer 3

这听起来是有可能的。使用jQuery.append、jQuery.fadeIn和fadeOut的组合，您应该能够创建一个漂亮的小选项卡控件。

有关基于JQuery元素和一组<div>'s：http://docs.jquery.com/UI/Tabs创建一组选项卡的简单方法，请参阅<ul> UI/Tabs