0

を含むdivがあります。

ヘッダーのポパティが固定されたテーブル。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>

上記の表は、列がたくさんあるのでダミーですが、基本的に同じ方法で行いました。高さの幅だけが変更されます。

私のスクリプトは機能していません：

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

これで困った私を助けてください。

よろしくお願いします。

4

3 に答える 3

1

コンテナslideToggleで使用できます：main-div

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

JSFiddle の例。

于 2013-03-20T12:27:21.450 に答える
0

そのためにjqueryを使用できます

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

id main の div の可視性を css で非表示にします

于 2013-03-20T12:25:49.843 に答える
0

あなたのコードはjsfiddleで動作します。問題はあなたのスタイリングです。

id が main-div の div は、オーバーフローを非表示にしたり、スクロール バーを表示したりするように設定されていません (デフォルトでは、領域からはみ出したコンテンツのみが表示されます)。

main-div で style="overflow: auto" を設定してから、コードを実行してみてください。

<div id="main-div" style="overflow:auto">
于 2013-03-21T04:44:21.350 に答える