使用jQuery從HTML中刪除表格

Question

我有很多HTML進入我的應用程序，我無法控制。它們包含我想擺脫的佈局表格。它們可能很複雜並且嵌套。

我想要的是基本上從表中提取HTML內容，以便我可以將其注入到應用程序中的其他模板中。

我只能使用jQuery或純JS，沒有服務器端欺騙。

有沒有人知道一個好的提示，將完成這項工作的jQuery插件？

Littm - 我的意思是基本上從td標籤中提取內容。完成後，我不想在代碼中留下任何表格。謝謝！

下面是一個有問題的HTML類型的例子。這一切都來自XHR從一些古老的應用程序，所以我無法控制標記。我想要的是完全擺脫表格，只留下HTML或其他文本內容的其餘部分。

<table> 
    <tr><td colspan="4"></td></tr> 
    <tr> 
     <td width="1%"></td> 
     <td width="40%" style="padding-left: 15px"> 
     <p>Your access level: <span>Total</span></p> 
     </td> 
     <td width="5%"> 
      <table><tr><td><b>Please note</b></td></tr></table> 
     </td> 
     <td width="45%" style="padding-left: 6px" valign="top"><p>your account</p></td> 
    </tr> 
    <tr><td colspan="4">&nbsp;</td></tr> 
    <tr> 
     <td width="1%"></td> 
     <td width="40%" style="padding-left: 15px"> 
      <table> 
       <tr> 
        <td align="right">Sort Code: </td> 
        <td align="center"><strong>22-98-21</strong></td> 
       </tr> 
       <tr> 
        <td align="right">Account Number: </td> 
        <td><strong>1234959</strong></td> 
       </tr> 
      </table> 
     </td> 
     <td width="5%"></td> 
     <td width="45%" style="padding-left: 6px">Your account details for</td> 
    </tr> 
</table> 

我試過了;

var data = "" 
$("td").each(function(){ 
    data += $(this).html() 
}); 
$("article").append(data); 
$("table").remove(); 

但是var data仍然包含嵌套的td標籤。我不是JS專家，所以我不知道還有什麼其他的嘗試....

Answer 1

編輯：你應該創建一個遞歸函數來做到這一點。

只需創建你函數獲得「TD」的作爲值：

function searchTexts(td) { 
    if (td.find("td")) { 
      searchTexts(td.find("td")); 
    } 
    td.each(function(){ 
     data += $(this).html() 
     $(this).remove(); // remove it for avoiding duplicates 
    }); 
} 

然後把它傳遞一個jQuery對象的功能。

Answer 2

讓我們假設你有X個表格。

爲了提取這些所有的內容信息，你可以嘗試這樣的事：

// Array containing all the tables' contents 
var content = []; 

// For each table... 
$("table").each(function() { 

    // Variable for a table 
    var tb = []; 
    $(this).find('tr').each(function() { 

     // Variable for a row 
     var tr = []; 

     $(this).find('td').each(function() { 
      // We push <td> 's content 
      tr.push($(this).html()); 
     }); 

     // We push the row's content    
     tb.push(tr); 
    }); 
    // We push the table's content 
    content.push(tb); 
}); 

因此，舉例來說，如果我們有以下2個表：

<table> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>A</td> 
    </tr> 
</table> 

<table> 
    <tr> 
     <td>r1</td> 
     <td>r2</td> 
     <td>r3</td> 
    </tr> 
    <tr> 
     <td>rA</td> 
     <td>rB</td> 
    </tr> 
    <tr> 
     <td>rP</td> 
    </tr> 
</table> 

數組content將是這樣的：

content = [ [ [1, 2], [A] ] ] , [ [r1, r2, r3], [rA, rB], [rP] ] ] 
      \_______________/ \______________________________/ 
       1st table    2nd table 

和如果y您想要訪問第一個表格，您只需訪問content[0]即可。

---

現在，讓我們假設你有一個DIV，與和id my_div，並且要輸出中有一些表格的內容。

例如，假設您只想要第一個表。然後，你會做這樣的事情：

// Note: content[0] = [[1, 2], [A]] 

var to_print = "<table>"; 

for(var i=0; i<content[0].length; i++) { 
    to_print += "<tr>";  
    for(var j=0; j<content[0][i].length; j++)  
     to_print += "<td>"+ content[0][i][j] +"</td>";    

    to_print += "</tr>";   
} 

to_print += "</table>"; 

$("#my_div").html(to_print); 

，這將給你這樣的：

<div id="my_div"> 
    <table> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td>A</td> 
     </tr> 
    </table> 
</div> 

希望這有助於。