[英]Remove tables from HTML using jQuery
我的應用程序中有很多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"> </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專家,所以我不確定還有什么嘗試...。
假設您有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);
});
因此,例如,如果我們有以下兩個表:
<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
如果要訪問第一個表,則只需要訪問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>
希望這可以幫助。
編輯:您應該創建一個遞歸函數來做到這一點。
只需創建將“ 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對象傳遞給函數。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.