如何做一個Div的相同位置，這是動態出現在兩行和4個tds的表格中？

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/？