使用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> 

希望这有助于。