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縮小表格

回答

相關問題