jQuery로 테이블 조작

테이블 기반 레이아웃이있는 끔찍한 응용 프로그램을 사용하여 작업하고 있습니다. 그것은 심각하게 제한되며 고유 한 클래스를 추가하거나 실제로 html 출력을 편집하는 작업을 수행 할 수 없습니다. 누군가 jQuery를 사용하여 레이아웃을 조작 할 수있는 방법을 보여줄 수 있습니까?jQuery로 테이블 조작

코드는 다음과 같이 보입니다 :

<table width="100%" border="0" cellpadding="3" cellspacing="0"> 
    <tr> 
     <td> 
      <TABLE CELLPADDING="3" CELLSPACING="" BORDER="0"> 
       <TR> 
        <TD> 
        <TABLE CELLPADDING="3" CELLSPACING="0" BORDER="0"> 
         <TR> 
          <TD STYLE="padding:3px;"> 
           <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"> 
           <TD NOWRAP CLASS="MainNavigation"> 
           Link 1</TD> 
           </TABLE> 
          </TD> 
          <TD STYLE="padding:3px;"> 
           <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"> 
           <TD NOWRAP CLASS="MainNavigation"> 
           Link 2</TD> 
           </TABLE> 
          </TD> 
          <TD STYLE="padding:3px;"> 
           <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"> 
           <TD NOWRAP CLASS="MainNavigation"> 
           Link 3</TD> 
           </TABLE> 
          </TD> 
         </TR> 
        </TABLE> 

        <TABLE CELLPADDING="3" CELLSPACING="0" BORDER="0" > 
         <TR> 
          <TD STYLE="padding:3px;"> 
           <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"> 
           <TD NOWRAP CLASS="MainNavigation"> 
           Link 4</TD> 
           </TABLE> 
          </TD> 
          <TD STYLE="padding:3px;"> 
           <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"> 
           <TD NOWRAP CLASS="MainNavigation"> 
           Link 5</TD> 
           </TABLE> 
          </TD> 
         </TR> 
        </TABLE> 
        </TD> 
       </TR> 
      </TABLE> 
     </td> 
    </tr> 
</table>

미운 권리를!

그래서이 예제에서 링크 3을 두 번째 테이블로 이동하기 위해 스크립트를 사용하여 어떻게 조작 할 수 있습니까? 내가 여기에 바이올린을 시작 :

http://jsfiddle.net/2gYfq/

출처

2011-03-29 Zac

는 아무것도 선택할 수 클래스 또는 ID가 있습니까? – Neal

와우,보기 흉한 것뿐만 아니라 (테이블 요소의 직접적인 하위 요소로 여러 개의'td' 요소가 있습니다.) 또한 유효하지 않습니다. 다른 응용 프로그램으로 이동할 것을 제안 할 수 있습니까? ... 기업 내에서 그렇게하는 것이 쉽지는 않지만, 개발 비용 절감 노력에 가치가있을 수 있습니다. –

@ David. heh 나는 바란다. 그러나 어떤 길도. 여기 사람들은이 진절머리로 일하는 데 몇 달을 보냈습니다. 거대한 (수십억 달러) 달러 회사에 의해 개발 된 것처럼 저에게 놀랍습니다. 그들이 코드를 업데이트 할 수 있다고 생각할 것입니다! – Zac

행운을 우리를 위해, jQuery를 쉽게 그런면을 처리 할 수있는 방법이있다. 당신은 insertBefore() 수 .detach(), :contains() 사용과 :

var refTD = $('.MainNavigation:contains("Link 4")').parent().closest('td'); 
$('.MainNavigation:contains("Link 3")').parent().closest('td') 
             .detach() 
             .insertBefore(refTD);

See example →

출처

2011-03-29 18:47:28 mVChr

jQuery로 테이블 조작

답변

관련 문제