Question

我有一个第三方应用，可以创建我需要显示的基于HTML的报告。我有一些控制它们的外观，但总的来说它非常原始。我可以注入一些javascript。我想尝试将一些jQuery的优点注入其中以整理它。我想做的一件具体事情就是拿一张表（一个实际的HTML＆lt; table＆gt;），它总是包含一行和一列可变的列，然后将它神奇地转换为带有内容的标签视图（总是一个＆lt; div＆gt; ;我可以在必要时提供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和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

复制了标题部分

Answer 2

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

Answer 3

这当然听起来有可能。结合使用jQuery.append和jQuery.fadeIn以及fadeOut，你应该能够创建一个漂亮的小标签控件。

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

Answer 4

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

Answer 5

听起来你对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);

Answer 6

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

用jQuery来美化别人的html

6 个答案: