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

편집 : 편집을 수행하려면 재귀 함수를 만들어야합니다.

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를 객체를 전달 호출 :

은 단순히 당신에게 값으로 "TD"의를 얻을 기능을 만들 수 있습니다.

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); 
}); 

그래서 예를 들어, 우리는 다음과 같은 두 테이블이있는 경우 :

<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 = [ [ [1, 2], [A] ] ] , [ [r1, r2, r3], [rA, rB], [rP] ] ] 
      \_______________/ \______________________________/ 
       1st table    2nd table 

와 y 경우 : content은 다음과 같이 될 것입니다 첫 번째 테이블에 액세스하려면 예를 들어 content[0]에 액세스해야합니다.

---

이제, 당신이하고 ID my_div하는 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> 

희망 그런 다음 같은 것을 할 것입니다.