动态 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 设置为绝对定位（位置：绝对），并将每个表格单元格设置为（位置：相对）

这将防止 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.

关键是我不一定只是滑动它，而是根据需要定位。抓住父母或一些触发器然后根据它定位您的叠加层是相当简单的。您的代码不完整。如果您可以提供/编辑完整的页面，我相信我们可以制作一个确切的示例，因为这应该相当简单。

您可以结帐 => http://api.jquery.com/offset/ 以获取有关 .offset() 和 .postion() 的更多信息；

Answer 3

这是导致该问题的填充和间距。设置cellpadding=0 和cellspacing=0。

如果你仍然想保留行和单元格之间的空间，在单元格中添加一个 div，例如，
<div style="width:275px">，然后将动态 div 放入其中，也将修复它。