使用jQuery來美化別人的html

我有第三方應用程序，可以創建需要顯示的基於HTML的報告。我有一些控制他們的外觀，但總的來說它很原始。我可以注入一些JavaScript，但。我想嘗試在它中加入一些jQuery的好處來整理一些。我想要做的一件事就是拿一張表格（一個實際的HTML <表格>），它總是包含一行和可變數量的列，並將其神奇轉換爲標籤視圖，其中的內容（總是一個<div> div我可以根據需要提供ID）每個原始表格單元格表示選項卡式視圖中的一個表格。我還沒有找到像這樣的重新養育項目的任何好（讀：簡單）的例子，所以我不知道從哪裏開始。有人可以提供一些關於我如何嘗試這一點的提示嗎？使用jQuery來美化別人的html

來源

2008-09-10 Chris Farmer

給出一個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(); 
});

爲了得到這個工作我引用的FOLL由於jQuery的文件

jQuery的latest.js
ui.core.js
ui.tabs.js

我引用的flora.all.css樣式表。基本上我從jQuery tab example

來源

2008-09-16 20:53:38

你可以用jQuery做到這一點，但它可能會使額外的維護成爲一場噩夢。我會建議不要這樣做/屏幕抓取，因爲如果來源發生變化，那麼您的工作就會發生。

來源

2008-09-10 14:14:24

嗯，我知道，我可以注入特定ID屬性成獲得提供特定的頁面元素，以及HTML源代碼是否則不太可能改變有意義的方法。你有一個好點，但有了這個特定的第三方應用程序，我認爲這方面是相對安全的。 – 2008-09-10 14:16:50

這聽起來可能。通過jQuery.append和jQuery.fadeIn和fadeOut的組合，你應該可以創建一個漂亮的小標籤控件。

見JQuery的UI /標籤爲一個簡單的方法來創建一組基於<ul>元素標籤和一組<div>'s：http://docs.jquery.com/UI/Tabs

來源

2008-09-10 14:28:04 samjudson

複製標題部分我還建議注入一個額外的樣式表，並使用它來顯示/隱藏和樣式醜陋的元素。

來源

2009-05-21 10:55:15 Tom

聽起來像你對HTML Tidy所做的HTML清理不感興趣，但是在靜態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);

來源

2009-07-07 10:35:55 fbuchinger

美化HTML並不是一個這麼簡單的過程，因爲標籤之間的每一個換行符都是一個文本節點，並且任意的美化都會以可能對文檔結構有害並可能對內容有害的方式創建和刪除文本節點。我建議使用一個已經認爲所有這些條件通過程序，如http://prettydiff.com/?m=beautify

來源

2011-11-26 13:17:31 austincheney

使用jQuery來美化別人的html

回答

相關問題