使用jQuery美化他人'；s html_Jquery_Html

使用jQuery美化他人'；s html

jquery html

使用jQuery美化他人'；s html,jquery,html,Jquery,Html,我有一个第三方应用程序，可以创建需要显示的基于HTML的报告。我可以控制它们的外观，但总的来说，它相当原始。不过，我可以注入一些javascript。我想尝试向它注入一些jQuery的优点来整理它。我想做的一件具体事情是，获取一个始终包含一行和可变列数的表（一个实际的HTML），然后神奇地将其转换为选项卡式视图，其中每个原始表单元格的内容（如果需要，我可以提供一个ID）表示选项卡式视图中的一个工作表。我还没有找到像这样的育儿项目的好例子，所以我不知道从哪里开始。有人能给我一些提示，告诉我如何尝试

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

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

这听起来当然是可能的。通过jQuery.append和jQuery.fadeIn以及fadeOut的组合，您应该能够创建一个漂亮的小选项卡控件

请参阅JQuery UI/Tabs，了解一种基于

元素和一组

元素创建一组选项卡的简单方法：
给定如下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中测试）
$（文档）.ready（函数（）{
var-tabCounter=1；
$（“#我的桌子”）。在（“”）之后；
$（“#我的表div”）.appendTo（“#选项卡容器”）.each（function（）{
var id=“fragment-”+tabCounter；
$（this.attr（“id”，id）；
$（“#选项卡列表”）。追加（“”）；
tabCounter++；
});
$（“#tab container>ul”）.tabs（）；
});

为了实现这一点，我引用了以下jQuery文件

jquery-latest.js
ui.core.js
ui.tabs.js

我引用了flora.all.css样式表。基本上，我从
中复制了标题部分，我还建议注入一个额外的样式表，并使用它来显示/隐藏丑陋的元素，并为其设置样式。
听起来您对HTML清理不像HTML Tidy那样感兴趣，而是对静态HTML组件的交互式增强感兴趣（例如，在选项卡式界面中旋转静态表格）
这里的一些回复已经给了您一些提示，例如使用Jquery选项卡，但是我不喜欢他们的答案中的HTML重写方法
IMHO最好使用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);

$（'body'）.append（$（''）.attr（'id'，'mytabs'）；
$（'#mytabs'）.tabs（{}）；//在此处指定选项卡首选项
$（'#mytabs'）.tabs（'add'，mycontent）；
美化HTML并不是一个简单的过程，因为标记之间的每一个换行符都是一个文本节点，任意美化创建和删除文本节点的方式可能对文档结构有害，也可能对内容有害。我建议使用一个已经考虑了所有这些条件的程序ch as我知道我可以将特定的ID属性注入到呈现的特定页面元素中，并且HTML源代码不太可能以任何有意义的方式进行更改。你有一个很好的观点，但对于这个特定的第三方应用程序，我认为这方面是相对安全的。
$('body').append($('<div></div>').attr('id','mytabs'));
$('#mytabs').tabs({}); //specify tab preferences here
$('#mytabs').tabs('add',mycontent);