使用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 2011-03-29 18:43:35

哇，这不仅丑，它也是无效的（有几个'td'元素作为'table'元素的直接子元素）。我可以建议转向不同的应用程序吗？ ......我知道在一家公司内部做这件事并不容易，但它可能是值得降低开发成本的努力。 – 2011-03-29 18:43:46

@大卫..嘿，我希望..但没办法。这里的人花了几个月的时间与这个糟糕的事情合作..这对我来说太神奇了，因为它是由一个巨大的（数十亿美元）美元公司开发的......你会认为他们可以更新他们的代码！ – Zac 2011-03-29 19:47:14

我们是幸运的，jQuery有办法轻松地与这样的丑陋处理。使用:contains()，.detach()和insertBefore()您可以：

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操作表格

回答

相关问题