jquery - 使用jQuery美化别人的html

标签 jquery html

我有一个第三方应用程序，可以创建我需要显示的基于 HTML 的报告。我对它们的外观有一些控制，但总的来说这是相当原始的。不过，我可以注入(inject)一些JavaScript。我想尝试向其中注入(inject)一些 jQuery 的优点来整理它。我想做的一件具体事情是获取一个始终包含一行和可变数量列的表格(一个实际的 HTML

)，并神奇地将其转换为一个选项卡式 View ，其中内容(始终是一个
如果需要，我可以提供一个 ID)，每个原始表格单元格代表选项卡式 View 中的一个工作表。我还没有找到任何好的(读:简单的)像这样的重新养育项目的例子，所以我不知道从哪里开始。有人可以提供一些关于我如何尝试这个的提示吗？

最佳答案

给定一个像这样的 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 复制了标题部分

关于jquery - 使用jQuery美化别人的html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54138/

上一篇：html - 适用于基于表单的 Web 应用程序的良好 HTML 模板

下一篇：html - 当网页缩小时使图像堆叠

©2024 IT工具网  联系我们