jquery - 表行のslideToggle

Question

slideToggleはテーブルで機能しますか？

表の行をslideToggleしたい。しかし、それは何の効果もなく表示されます。

Answer 1

SlideToggleはテーブルの行で機能しますが、それはちょっとひどいことです。

最小よりも高い高さのテーブル行がある場合-このように

<tr height="30%">

次に、slidetoggleは、最小の高さに達するまでスムーズにスライドダウンします...その後、使用したようにすぐに消えます

$("#tr").hide();

http://jsfiddle.net/BU28E/1/でこれを示すjsfiddleを作成しました

あなたにとってより良い解決策は、divで作られたテーブルを使用することかもしれません。Divは非常にスムーズにスライドします。http://jsfiddle.net/BU28E/2/でこれを示す別のjsfiddleを作成しました

Answer 2

私がやっていることは、1つのDIVを行に配置し、TRとTDのパディングをゼロに設定することです。次に、行の代わりにdivをスライドして切り替えます。

<table>
  <tr style="padding: 0">
    <td style="padding: 0">
      <div id="slideme" style="display: none">
    </td>
  </tr>
</table>

$("#slideme").slideToggle();

よく働く。必要に応じて、各列にDIVを配置し、同時にスライドトグルすることができると思います。

Answer 3

この回避策が考慮され、効率的な方法であるかどうかはわかりませんが、私にとってはうまくいきました：

テーブルの最初の行をslideUpしたいとします（このコードはヘッダーをslideUpします）：

$('table tr').first().children().slideUp();

したがって、基本的には、行自体ではなく、行の子を上にスライドさせます:)

Answer 4

使ってみてください

$("#tr").fadeToggle(1000) 

同様の効果のために

Answer 5

これを行うには、trスライドするを設定し、display:none;その中に、テーブルにある列の数と同じ数のをtr追加します。これも、その中に設定されます。tdcolspandivdisplay:nonetd

スライド行に必要なすべてのコンテンツは前述の内容になり、divアニメーションtrでスライドします。

以下のスニペットは、これが実際に動作していることを示しています。

$(".accordion-row").on("click",
  function() {
    var accordionRow = $(this).next(".accordion");
    if (!accordionRow.is(":visible")) {
      accordionRow.show().find(".accordion-content").slideDown();
    } else {
      accordionRow.find(".accordion-content").slideUp(function() {
        if (!$(this).is(':visible')) {
          accordionRow.hide();
        }
      });
    }
  });

.accordion-row {
  cursor: pointer;
}

.accordion {
  display: none;
  width: 100%;
}

.accordion-content {
  display: none;
}


/* Only used to remove undeeded padding added by bootstrap */
table.table.table-hover>tbody>tr>td {
  padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>
        th1
      </th>
      <th>
        th2
      </th>
      <th>
        th3
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="accordion-row">
      <td>
        tr1 td1
      </td>
      <td>
        tr1 td2
      </td>
      <td>
        tr1 td3
      </td>
    </tr>
    <tr class="accordion">
      <td colspan="3">
        <div class="accordion-content">
          tr1 accordion-content
        </div>
      </td>
    </tr>
    <tr class="accordion-row">
      <td>
        tr2 td1
      </td>
      <td>
        tr2 td2
      </td>
      <td>
        tr2 td3
      </td>
    </tr>
    <tr class=" accordion">
      <td colspan="3">
        <div class="accordion-content">
          tr2 accordion-content
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 6

テーブルの行をスライドできないという問題の回避策を少し思いついた。このコードは、テーブルの内容が完全にテキストである場合にのみ機能します。これは、いくつかの作業で他のもの（画像など）をサポートするように調整できます。行は、コンテンツのサイズに達するまで縮小するだけです。したがって、必要に応じてコンテンツを縮小できる場合は、スライドが続行されます。

http://jsfiddle.net/BU28E/622/

$("button").click(function(){
    $('#1').slideUp({
        duration: 1500,
        step: function(){
            var $this = $(this);
            var fontSize = parseInt($this.css("font-size"), 10);

            // if the real and css heights differ, decrease the font size until they match
            while(!sameHeight(this) && fontSize > 0){
                $this.css("font-size", --fontSize);
            }
        }
    });
});

function sameHeight(el){
    var cssHeight = el.style.height;
    cssHeight = parseFloat(cssHeight.substring(0,cssHeight.length-2));
    var realHeight = $(el).innerHeight();

    return isNaN(cssHeight) || realHeight - cssHeight < 2;
}

通常のスライド効果とは対照的に、コンテンツが縮小するという点で、効果はわずかに異なります。

最後の行の< 2は、境界線（および場合によっては他の要因）に基づいて調整する必要がある場合があります。また、これはコンテンツを非表示にすることを示しているだけです。行が下にスライドするにつれてフォントサイズを大きくするには、同様のアプローチが必要になります。これは、概念実証のようなものです。

Answer 7

編集：ジョナタンの答えを試した後、彼の方法はかなりきれいに見えます。

ここに、クラスのテーブル行がありview-convertersます。これをクリックすると、クラスのすべてのdivが表示/非表示になりますTCConverters。

私の行は次のようになります。

<tr><td><div class="TCConverters"><input type="button" value="b1"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b2"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b3"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b4"></div></td></tr>

クリックすると実行されるコードは次のとおりview-convertersです。

テーブルセルのパディングに関しては、特別なことは何もしませんでした。

スライドのアニメーション化が完了すると、テーブルの行が非表示になることに注意してください。

$(".view-converters").click(function() {
    if(!$(".TCConverters:first").is(":visible")) {
        $(".TCConverters").parent().parent().show();
    }
    $(".TCConverters").slideToggle(200,function() { 
        if(!$(this).is(":visible")) {
            $(this).parent().parent().hide();
        }
    });
});

次のようになります。

オリジナル：

ここに、クラスのテーブル行がありview-convertersます。これをクリックすると、クラスのすべての行が表示/非表示になりますTCConverters。

hackyそれぞれの初期値と増分を変更することで速度を調整できます.each。

これは、スライドトグルほど行をうまく引き伸ばすことはできませんが、この効果は私の目的には役立ちました。

行の高さを本当に絞りたい場合は、0に達するまで高さを縮小するparam.hide()aに置き換えることで、自分でアニメーション化することができます。setTimeout

$(".view-converters").click(function() {
    var hacky = 50;
    if($('.TCConverters:first').is(':visible')) {
        $('.TCConverters').each(function() {
            var param = $(this);
            setTimeout(function() { param.hide(); },hacky);
            hacky += 5;
        });
    }
    else {
        $($('.TCConverters').get().reverse()).each(function() {
            var param = $(this);
            setTimeout(function() { param.show(); },hacky);
            hacky += 5;
        });
    }
});

次のようになります。

Answer 8

テーブル内の行のトグルをスライドできます。これを試してみてください

テーブルのHTMLコード：

<a href="#" >ok</a>
<table id="tbl">
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
    <tr><td>6</td><td>5</td></tr>
</table>

jQueryコードは「a」hrefをクリックするとここにあり、テーブルが切り替わります。

$(document).ready(function() {
    $("a").click(function() {
        $('table tr td').slideToggle("medium");
    });           
});

特定のインデックス行には、を使用できます$('table tr:eq(rowindex) td')。