使用jQuery操纵表

Question

我被一个可怕的应用程序卡住了，它有表驱动的布局。这是严重的限制，我不能添加独特的类或真正做任何事情来编辑html输出。有人能告诉我如何使用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/

Answer 1

对我们来说幸运的是，jQuery有办法轻松处理这些丑陋的事情。使用:contains()、.detach()和insertBefore()，您可以：

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