動態Div推動表單元格左邊的HTML JQuery

Question

我認爲這是一個簡單的修復，但我似乎無法弄清楚。

我有一個表格，其中有三個單元格，其中一旦點擊，就會顯示隱藏的div。但是，當div顯示時，它將圍繞它推動單元格。我正在尋找一種方式，div會顯示，但不會受限於單元格的大小，並且不會影響其周圍的其他單元格。

如果有一個更好的方式來組織這個比表中，請讓我知道。謝謝！

這裏是我的問題的一些示例代碼：

CSS：

<style> 
    .iphone { 
    display: none; 
} 
</style> 

的JavaScript/JQuery的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script> 
    //Choose iPhone model 
    function slideonlyone(thechosenone) { 
    $('.model').each(function(index) { 
      if ($(this).attr("id") == thechosenone) { 
       $(this).slideDown(200); 
      } 
      else { 
       $(this).slideUp(600); 
      } 
    }); 
    } 

     //Choose iPhone carrier 
     function slideonlytwo(thechosentwo) { 
     $('.carrier').each(function(index) { 
       if ($(this).attr("id") == thechosentwo) { 
        $(this).slideDown(200); 
       } 
       else { 
        $(this).slideUp(600); 
       } 
     }); 
     } 
     </script> 

HTML：
iPhone 5

  <div class="model" id="iphone5" style="display: none;padding: 15px;"> 
       <table width="80%"> 
       <center> 
       <tr> 
        <td width="33%"><a id="5carrier" href="javascript:slideonlytwo('5a');"><img src="_include/images/icons/att.png"></a> 
        <div class="carrier" id="5a" style="display:none;padding: 5px;"> Next Option.</div> 
        </td> 
        <td width="33%"><a id="5carrier" href="javascript:slideonlytwo('5v');"><img src="_include/images/icons/verizon.png"></a> 
        <div class="carrier" id="5v" style="display:none;padding: 5px;"> Next Option.</div> 
        </td> 
        <td width="33%"><a id="5carrier" href="javascript:slideonlytwo('5s');"><img src="_include/images/icons/sprint.png"></a> 
        <div class="carrier" id="5s" style="display:none;padding: 5px;"> Next Option.</div> 
        </td> 
        <td width="33%"><a id="5carrier" href="javascript:slideonlytwo('5f');"><img src="_include/images/icons/tmobile.png"></a> 
        <div class="carrier" id="5f" style="display:none;padding: 5px;"> Next Option.</div> 
        </td> 


       </tr> 
       </center> 
       </table> 
      </div> 
     </td> 

     <td width="33%"> 
     <div> 
      <a id="myHeader" href="javascript:slideonlyone('iphone4s');" ><center><img src="_include/images/products/iphone4s.png"> 
       <br><b>iPhone 4S</b><center></a></a> 
     </div> 
     <div class="model" id="iphone4s" style="display: none;padding: 15px;"> 
      <table width="100%"> 
       <tr> 
       <td width="33%">AT&T</td> 
       <td width="33%">Verizon</td> 
       <td width="33%">Sprint</td> 
       <td width="33%">Factory Unlocked</td> 
       </tr> 
      </table> 
     </div> 

     </td> 

     <td width="33%"> 
     <div> 
      <a id="myHeader" href="javascript:slideonlyone('iphone4');" ><center><img src="_include/images/products/iphone4.png"> 
       <br><b>iPhone 4</b><center></a></a> 
     </div> 
     <div class="model" id="iphone4" href="javascript:slideonlyone('4carrier)" style="display: none;padding: 15px;"> 
      <table width="100%"> 
       <tr> 
       <td width="33%">AT&T</td> 
       <td width="33%">Verizon</td> 
       <td width="33%">Sprint</td> 
       <td width="33%">Factory Unlocked</td> 
       </tr> 
      </table> 
     </div> 
     </td> 
    </tr> 
</table> 
</html> 

Answer 1

我建議設置爲絕對位置（位置：絕對）每個表格單元格內的股利和使用（位置：相對）每個表格單元

這將防止DIV從與你的桌子大小混亂。

在略有相關的註釋中，改爲將您的重複ID改爲「class」。

<td width="33%"><a class="5carrier" href="javascript:slideonlytwo('5a');"><img src="_include/images/icons/att.png"></a> 
    <div class="carrier" id="5a" style="display:none;padding: 5px;"> Next Option.</div> 
</td> 
<td width="33%"><a class="5carrier" href="javascript:slideonlytwo('5v');"><img src="_include/images/icons/verizon.png"></a> 
    <div class="carrier" id="5v" style="display:none;padding: 5px;"> Next Option.</div> 
</td> 
<td width="33%"><a id="5carrier" href="javascript:slideonlytwo('5s');"><img src="_include/images/icons/sprint.png"></a> 
<div class="carrier" class="5s" style="display:none;padding: 5px;"> Next Option.</div> 
</td> 
<td width="33%"><a class="5carrier" href="javascript:slideonlytwo('5f');"><img src="_include/images/icons/tmobile.png"></a> 
    <div class="carrier" id="5f" style="display:none;padding: 5px;"> Next Option.</div> 
</td> 

對於你的CSS，嘗試：

.carrier { 
    position: absolute; 
    height: 100; /*or whatever your cell height or desired height is*/ 
    width: 100%; 
} 
td { 
    position: relative; 
} 

Answer 2

我在div絕對相對於觸發或任何元素，您認爲最佳的位置。絕對定位應該解決您的定位問題。你可以用CSS做到這一點，但我會選擇jQuery進一步控制。以下是給你一個關於定位的概念。

// get the element to position by. could be row another div or the trigger itself 
var offset = $('.element').offset(); 
// however you grab your div element to slide down this is just to give you an idea. 
var modelSlider = ('#id'); 
// set the offset of your slider. 
modelSlider.offset({ left: offset.left, top: offset.top }); 
modelSlider.show() or whatever you want to do here as to effect. 

重點是我不一定只是滑動它，而是因爲它需要的位置。抓住一個父母或某個觸發器，然後根據它定位你的覆蓋層是很微不足道的。您的代碼不完整。如果你可以提供/編輯整個頁面，我相信我們可以拿出一個確切的例子，因爲這應該相當簡單。

您可以通過checkout =>http://api.jquery.com/offset/獲取有關.offset（）和.postion（）的更多信息。

Answer 3

這是填充和間距導致該問題。設置cellpadding=0和cellspacing=0。

如果您仍然想保持行和細胞之間的空間，在細胞內，比如添加一個div，
<div style="width:275px">，然後把動態的div裏面，也將修復它。