使用jQuery美化别人的html
我有一个第三方应用程序，该应用程序创建需要显示的基于HTML的报告。我对它们的外观有一定的控制权，但是总的来说，这是非常原始的。我可以注入一些JavaScript。我想尝试向其中注入一些jQuery优点，以便对其进行整理。我想做的一件事是获取一个始终包含一行和可变列数的表(实际的HTML <table>)，然后将其神奇地转换为选项卡式视图，其中的内容(总是一个如果有需要，我可以提供一个ID)，每个原始表格单元在选项卡式视图中代表一张工作表。我还没有找到像这样的重新父项的任何好(读：简单)示例，所以我不确定从哪里开始。有人可以提供一些有关如何尝试的提示吗？
解决方案
回答
我们可以使用jQuery执行此操作，但可能会使额外的维护工作陷入噩梦。我建议不要这样做/屏幕抓取，因为如果源发生更改，工作也会随之改变。
回答
这听起来确实可行。结合使用jQuery.append和jQuery.fadeIn以及fadeOut，我们应该能够创建一个漂亮的小选项卡式控件。
请参阅JQuery UI / Tab，以简单的方式基于<ul>元素和一组<div>的标签创建一组标签：http://docs.jquery.com/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中进行了测试)
$(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选项卡示例复制了标头部分
回答
我还建议注入其他样式表，并使用它来显示/隐藏和设置丑陋的元素。
回答
听起来我们对HTML清理不如HTML Tidy感兴趣，但是对静态HTML组件的交互式增强(例如，在选项卡式界面中打开静态表)感兴趣。
这里的一些回复已经给了我们一些提示，例如使用Jquery标签，但我不喜欢其答案中的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);
