jquery缩小表格

一张固定头文件poperty.I的表通过写入2个div实现它第一个div包含一个只定义头文件的表，而下一个div包含一个包含所有数据的表。现在让它保持对齐我给了他们一个固定的宽度。

带固定头的表格工作正常。

但现在这里是问题，我不得不通过按钮单击事件缩小和扩大表。检查我的下面的代码是否有帮助。如果还有其他方法可以达到这个效果，请提出

<input type="button" value="click me" id="abc"> 

<div id="main-div"> 
    <div id="header"> 
    <table class="gradienttable"> 
     <thead> 
     <tr> 
      <th style="width:80px;">col 1</th> 
      <th style="width:80px;">col 2</th> 
      <th style="width:7px;"></th> 
     </tr> 
     </thead> 
    </table> 
    </div> 
    <div id="data" style="overflow:auto;height:50px;width:200px;"> 
     <table class="gradienttable" > 
     <tbody> 
      <tr> 
       <td style="width:80px;">data r1c1</td> 
       <td style="width:80px;">data r1c2</td> 
      </tr> 
      <tr> 
       <td style="width:80px;">data r2c1</td> 
       <td style="width:80px;">data r2c2</td> 
      </tr> 
      <tr> 
       <td style="width:80px;">data r3c1</td> 
       <td style="width:80px;">data r3c2</td> 
      </tr> 
      </tbody> 
     </table> 
    </div> 
</div>

上表是虚设如我有cols.But的一大堆我已经基本上完成了它的相同way.Only高度宽度将发生变化。

我的剧本是不工作：

$(this).ready(function() { 
    $('#abc').click(function() { 
    $('div#main-div').animate({width:"100px"}); 
    }); 
});

请你帮我在这里遇到麻烦与此有关。

Thanx提前。

来源

2013-03-20 Saurabh

你可以把你的脚本？ – btevfik 2013-03-20 12:22:29

你的代码在jsfiddle中工作。问题在于你的造型。

带有id main-div的div未设置为隐藏溢出或显示滚动条（默认情况下它只显示溢出该区域的内容）。

尝试在main-div上设置style =“overflow：auto”，然后运行代码。

<div id="main-div" style="overflow:auto">

来源

2013-03-21 04:44:21

_Opps_ .. ** Thanx **反正..现在工作正常.. – Saurabh 2013-03-21 05:29:27

你可以使用jQuery为

$(function(){ 
    $("#abc").click(function(){ 
    $('#main').slideToggle('slow'); 
}); 
})

把id为主要div的可见性隐藏在CSS

来源

2013-03-20 12:25:49 Bhadra

事情是我想缩小表格而不是隐藏它。 – Saurabh 2013-03-21 04:04:40

您可以main-div容器上使用slideToggle：

$('input#abc').on('click', function() { 
    $('div#main-div').stop().slideToggle(); 
})

JSFiddle example 。

来源

2013-03-20 12:27:21

事情是我想缩小表不隐藏它。 – Saurabh 2013-03-21 03:57:17

jquery缩小表格

回答

相关问题