使用jQuery美化别人的html

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

  •  09-06-2019
  •  | 
  •  

题

我有一个第三方应用程序，可以创建我需要显示的基于 HTML 的报告。我有 一些 控制它们的外观，但总的来说这是相当原始的。我 能 不过，注入一些 JavaScript。我想尝试向其中注入一些 jQuery 的优点来整理它。我想做的一件具体事情是获取一个始终包含一行和可变数量列的表格（一个实际的 HTML <table>），并神奇地将其转换为一个选项卡式视图，其中内容（始终是一个 <div>如果需要，我可以提供一个 ID），每个原始表格单元格代表选项卡式视图中的一个工作表。我还没有找到任何好的（阅读：简单）像这样重新设置父项的示例，所以我不知道从哪里开始。有人可以提供一些关于我如何尝试这个的提示吗？

有帮助吗？

解决方案

给定一个像这样的 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 选项卡示例

其他提示

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

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

请参阅 JQuery UI/Tabs，了解基于以下内容创建一组选项卡的简单方法： <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