jQuery Sortable-多个表

时间:2019-01-17 16:48:09

标签: javascript jquery

我的结构就是这样

我正在看着使用jquery sortable能够围绕这些表交换这些表,最多也可以是7或8个表(这是用于布局编辑屏幕的)

    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="formOuterBorder formContainer">
    <tr>
        <td>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="formOuterBorder">
                <tr class="pointer" onclick="javascript:expandCont('Contacts244')">
                    <th align="left" class="leftFormHeaderLeft">Address Information</th>
                    <th class="leftFormHeaderRight" align="right" width=20><span class="icon icon-add-circle" id="img_Contacts244"></span></th>
                </tr>
            </table>
            <table width="100%" border="0" cellspacing="1" cellpadding="0"></table>
            <div id="Contacts244" class="blockbody hide">
                <table width="100%" border="0" cellspacing="1" cellpadding="0">
                    <tr>
                        <td width="20%" class="dataLabel" valign="top">Mailing Street:</td>
                        <td valign="top" class="dataField">888 Sohoot Road</td>
                        <td width="20%" class="dataLabel" valign="top">Other Street:</td>
                        <td valign="top" class="dataField">&nbsp;</td>
                    </tr>
                    <tr>
                        <td width="20%" class="dataLabel">Mailing Postcode:</td>
                        <td width="30%" valign="top" class="dataField"><a href=# onclick="windowOpenCentered('http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&q=EX54LK&ie=UTF8&t=p&z=18','GoogleMap','width=800,height=600,scrolling=auto,resizable')">EX54LK</a></td>
                        <td width="20%" class="dataLabel">Other Postcode:</td>
                        <td width="30%" valign="top" class="dataField">
                            <a href=# onclick="windowOpenCentered('http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&q=&ie=UTF8&t=p&z=18','GoogleMap','width=800,height=600,scrolling=auto,resizable')"></a>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

<!--next table-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="formOuterBorder formContainer">
    <tr>
        <td>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="formOuterBorder">
                <tr class="pointer" onclick="javascript:expandCont('Contacts244')">
                    <th align="left" class="leftFormHeaderLeft">Address Information</th>
                    <th class="leftFormHeaderRight" align="right" width=20><span class="icon icon-add-circle" id="img_Contacts244"></span></th>
                </tr>
            </table>
            <table width="100%" border="0" cellspacing="1" cellpadding="0"></table>
            <div id="Contacts244" class="blockbody hide">
                <table width="100%" border="0" cellspacing="1" cellpadding="0">
                    <tr>
                        <td>Mailing Street:</td>
                        <td valign="top"></td>
                        <td width="20%">Other Street:</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>Mailing Postcode:</td>
                        <td><a>EX54LK</a></td>
                        <td></td>
                        <td>
                            <a></a>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

很难对下面的表格重新排序

  

$(“。formContainer”)。sortable();

找到一个动态的解决方案并且不需要重组我们的初始html会是一件很不错的事情,因为在我们系统中将其绘制的函数很旧并且可能看起来很杂乱:)

0 个答案:

没有答案