使用jQuery美化别人的html答案

【问题标题】：Using jQuery to beautify someone else's html使用jQuery美化别人的html
【发布时间】：2010-09-08 10:08:32
【问题描述】：

我有一个第三方应用程序可以创建我需要显示的基于 HTML 的报告。我对它们的外观有一些控制，但总的来说它非常原始。不过，我可以注入一些 javascript。我想尝试在其中注入一些 jQuery 的优点来整理它。我想做的一件事是获取一个表格（一个实际的 HTML

），它总是包含一行和可变数量的列，并神奇地将其转换为一个选项卡式视图，其中的内容（总是一个

如果需要，我可以提供一个 ID）每个原始表格单元格代表选项卡式视图中的一个工作表。我还没有找到任何好的（阅读：简单）这样的重新养育项目的例子，所以我不知道从哪里开始。有人可以提供一些关于我如何尝试这个的提示吗？

【问题讨论】：

标签： jquery html

【解决方案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 和 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 tab example复制了标题部分

【讨论】：

【解决方案2】：

您可以使用 jQuery 完成此操作，但它可能会使额外的维护成为一场噩梦。我建议不要这样做/屏幕抓取，因为如果源发生变化，您的工作也会随之改变。

【讨论】：

好吧，我知道我可以将特定的 ID 属性注入到要呈现的特定页面元素中，否则 HTML 源代码不太可能以任何有意义的方式发生变化。你说得很好，但是对于这个特殊的 3rd-party 应用程序，我认为它的这一方面是相对安全的。

【解决方案3】：

这听起来确实可行。结合使用 jQuery.append 和 jQuery.fadeIn 和 fadeOut，您应该能够创建一个漂亮的小选项卡式控件。

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

【讨论】：

【解决方案4】：

我还建议注入一个额外的样式表并使用它来显示/隐藏丑陋的元素并为其设置样式。

【讨论】：

【解决方案5】：

美化 HTML 并不是一个简单的过程，因为标签之间的每个换行符都是一个文本节点，任意美化创建和删除文本节点的方式可能对文档结构有害，并且可能对内容有害。我建议使用已经考虑过所有这些条件的程序，例如http://prettydiff.com/?m=beautify

【讨论】：

【解决方案6】：

听起来您不像 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);

【讨论】：