2

我有一个第三方应用程序可以创建我需要显示的基于 HTML 的报告。我可以控制它们的外观，但总的来说它非常原始。不过，我可以注入一些 javascript。我想尝试在其中注入一些 jQuery 的优点来整理它。我想做的一件事是获取一个始终包含一行和可变数量列的表格（一个实际的 HTML <table>），然后神奇地将其转换为一个选项卡式视图，其中的内容（总是一个 <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

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

于 2008-09-10T14:14:24.010 回答
0

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

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

于 2008-09-10T14:28:04.900 回答
0

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

于 2009-05-21T10:55:15.060 回答
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 回答
0

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

于 2011-11-26T13:17:31.063 回答