jquery - 如何在两行和 4 tds 的表中动态出现一个 Div 的相同位置？

Question

我想在我的页面中动态地在不同位置执行相同位置的一个 div。

我有一张两行表，每行包含两个 td，并且我有嵌入按钮的 td。单击该嵌入按钮时，我会显示一个包含站点列表的 div，它会动态显示四个按钮。

这是一段html代码:

    <table class="allListTbl" id="appListTbl">
    <tr>
        <td colspan="4" align="center">
            <marquee behavior="alternate" width="55%">
            <img src="static/images/yolaLogo70x70.jpg" alt="yola_logo" style="width:35px; height:35px; margin-left:2%;" id="yolaLogo"/>
            <img src="static/images/weeblyLogo70x70.jpg" alt="webly_logo" style="width:35px; height:35px;  margin-left:2%;" id="weblyLogo"/>
            <img src="static/images/godaddyLogo70x70.jpg" alt="godaddy_logo" style="width:35px; height:35px; margin-left:2%;" id="godaddyLogo"/>
            <img src="static/images/moonfruitLogo70x70.jpg" alt="moomfruit_logo" style="width:35px; height:35px;  margin-left:2%;" id="moomfruitLogo"/>
            <img src="static/images/htmlLogo70x70.png" alt="customBuild"  style="width:35px; height:35px;  margin-left:2%;" id="customBuild"/>
            <img src="static/images/jimdoLogo70x70.jpg" alt="jimdoLogo"  style="width:35px; height:35px; margin-left:2%;" id="jimdoLogo"/>
            <img src="static/images/squarespaceLogo70x70.jpg" alt="squareSpaceLogo"  style="width:35px; height:35px; margin-right:1px;" id="squareSpaceLogo"/>
            </marquee>
        </td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td align="center" valign="top">
            <table class="mediaFeedTbl" id="mediaFeedTbl">
                <tr>
                    <td colspan="2">
                        <img src="static/images/MediaFeedNewLogo.png" alt="mediafeedLogo" style="width:60px; height:60px;" id="mediaFeedLogo"/>
                    </td>
                    <td>
                        <span id="AppNameOne">Media Feed</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" align="justify" valign="top">
                        <p id="appDescrptnOne">
                        Media Feeds or blogs or press coverages are essential to boost your credibility and reputation in the market. Ability to effectively and easily display them on your web site                                                that can impress your customer is essential.
                        </p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" class="demoBtn"  id="demoBtnOne" value="Demo"/>
                    </td>
                    <td id="mickey">
                        <input type="button" class="embedBtn"  id="mediaFeedEmbed" value="Embed"/>
                    </td>
                    <td>

                    </td>
                </tr>

            </table>
        </td>
        <td>
            <table class="propertyTbl" id="propertyTbl">
                <tr>
                    <td colspan="2">
                        <img src="static/images/propertyUpload_logo.png" alt="propertyUploadLogo" style="width:60px; height:60px;" id="uploadPropertyLogo"/>
                    </td>
                    <td>
                        <span id="AppNameTwo">Upload Property</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" align="justify" valign="top">
                        <p id="appDescrptnTwo">
                        With the Upload Property app your website visitors will be empowered to easily upload their property listings to you, allowing you to expand your real estate business with                                                    ease.
                        </p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" class="demoBtn"  id="demoBtnTwo" value="Demo"/>
                    </td>
                    <td>
                        <input type="button" class="embedBtn"  id="uploadPropertyEmbed" value="Embed"/>
                    </td>
                    <td>

                    </td>
                </tr>

            </table>
        </td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td align="center" valign="top">
            <table class="tblrsrvtnTbl" id="tblrsrvtnTbl">
                <tr>
                    <td colspan="2">
                        <img src="static/images/logo7_style1.png" alt="tblresrvtnLogo" style="width:60px; height:60px;" id="tblResrvtnLogo"/>
                    </td>
                    <td>
                    <p><span id="AppNameThr">Restaurant Booking</span></p></td>
                </tr>
                <tr>
                    <td colspan="3" align="justify" valign="top">
                        <p id="appDescrptnThr">
                        SCUBE offers one of the easiest and most flexible ways for restaurants to take complete control over their reservations booking process. Guests can book a table in a cost                                                effective and effortless way. Restaurant Booking by SCUBE provides functionality to easily manage daily rush hours and group bookings and has rich reporting features to make                                                sure that management is always in the know.
                        </p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" class="demoBtn"  id="demoBtnThr" value="Demo"/>
                    </td>
                    <td>
                        <input type="button" class="embedBtn"  id="restaurantBookingEmbed" value="Embed"/>
                    </td>
                    <td>
                    </td>
                </tr>

            </table>
        </td>
        <td align="left" valign="top">
            <table class="salonTbl" id="salonTbl">
                <tr>
                    <td colspan="2">
                        <img src="static/images/Spa_Salon_logo.png" alt="SpaSalonLogo" style="width:60px; height:60px;" id="spaSalonLogo"/>
                    </td>
                    <td>
                        <span id="AppNameFour">Salon Appointment</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" align="justify" valign="top">
                        <p id="appDescrptnFour">
                        SCUBE offers one of the easiest and most flexible ways for Salons to take complete control over their services. Interested clients can schedule an appointment in a cost                                                                  effective and effortless way.
                        Grow your business by managing your services and clients effectively.
                        </p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" class="demoBtn"  id="demoBtnFour" value="Demo"/>
                    </td>
                    <td>
                        <input type="button" class="embedBtn"  id="saloonAppEmbed" value="Embed"/>
                    </td>
                    <td>

                    </td>
                </tr>

            </table>
        </td>
        <td>&nbsp;</td>
    </tr>
</table>

Answer 1

你看起来像这样:http://fiddle.jshell.net/m791hfbo/1/或 http://fiddle.jshell.net/8f69y89x/ ？