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>

丑陋吧？！

所以从这个例子中我怎么能用脚本操作它来将Link 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);

See example →

用jQuery操纵表

1 个答案: