web-dev-qa-db-ja.com

jQuery Slide Up Table Row

とりわけ、ユーザーがテーブル内のレコードをリアルタイムで削除できるカスタムjQueryプラグインを構築しています。レコードが削除されたら、削除されたテーブル行の背景色を赤にして、上にスライドさせて非表示にします。

以下のコードスニペットは、色を変更するアニメーションを実行せず、行を上にスライドしません。ただし、スライドアップアニメーションになるはずのものが終了すると、行は削除されます。以下のコードを確認するときに知っておくべきこと：

  1. 「オブジェクト」変数は、クリックされて削除操作をトリガーしたオブジェクトへのjQuery参照です。
  2. 「object.parent（）。parent（）」オブジェクトは、削除される行です。
  3. "deleteHighlight" CSSクラスには、行を赤色にする色が含まれています。
  4. 「addClass」メソッドは、jQueryではなく、jQueryUIの「addClass」メソッドを使用します。アニメーション効果とコールバックが可能です。
object.parent().parent().addClass('deleteHighlight', 1000, function() {
//Fold the table row
  $(this).slideUp(1000, function() {
  //Delete the old row
    $(this).remove();
  });
});

これが実行されているHTMLは次のとおりです。特別なものはありません。

<table class="dataTable">
<thead>
<tr>
<th>&nbsp;</th>
<th>Title</th>
<th>Content Snapshot</th>
<th>Management</th>
</tr>
</thead>

<tbody>
<tr class="odd" id="11" name="1">
<td class="center width50"><a class="dragger"></a><a class="visibilityTrigger eyeShow"></a></td>
<td class="center width150">Title</td>
<td>
<div class="clipContainer">Content</div>
<div class="hide contentContainer">Content</div>
<div class="hide URLContainer">my-url</div>
</td>
<td class="center width75"><a class="edit"></a><a class="delete"></a></td>
</tr>
</tbody>
</table>

誰かがこれを修正する方法の例を教えていただけませんか？

お時間をいただきありがとうございます。

javascriptjquerycssjquery-uijquery-animate
26
Oliver Spryn

これは一部ブラウザの問題だと思います。あなたは本当にターゲットにするべきではありません<tr />は、ブラウザの解釈が異なるためです。さらに、それらはブロック要素とは異なる動作をします。

この例では： http://jsfiddle.net/lnrb0b/3t3Na/1/ コードはChromeで部分的に機能します。 <tr />はスタイリングを許可されています（一部のIEバージョンとは異なります））が、アニメーション化することはできません。作成した場合display:block心配する必要はありませんが、テーブルとしてはごみです:)

この例では、 http://jsfiddle.net/lnrb0b/3t3Na/2/ アニメーション<td /> 'sですが、ほとんど機能せず、辛抱強くゆっくりと動作します。

それらのテストをして、その間私は解決策を考えてみます。

14
Stuart Burrows

スライドと削除を処理する最もエレガントな方法は、各tdの内部コンテンツをdivでラップし、tdのパディングと高さを同時に減らすことです。 divs。この簡単なデモをチェックしてください： http://jsfiddle.net/stamminator/z2fwdLdu/1/

7
Jacob Stamm

addClassはすぐに実行されるため、コールバック関数を受け入れません。もっとこのようなものが欲しくなるかもしれません。

object.parent().parent().addClass('deleteHighlight').slideUp(1000, function() {
    $(this).remove();
});
4
Dutchie432

できますよ！

スライドさせたいtrの各tdをdivにラップし、次にそれらのdivをスライドさせます！

もちろん、各tdのパディング（上部と下部）をアニメーション化する必要があります。

ここに完全な例があります：

http://jsfiddle.net/3t3Na/474/

私のソースコードの抜粋：

$('a').click(function(){
var object = $(this);
object.parent().parent().addClass('deleteHighlight', 1000, function() {
    $(this).find('td').each(function(index, element) {

    // Wrap each td inside the selected tr in a temporary div
    $(this).wrapInner('<div class="td_wrapper"></div>');

    // Fold the table row
    $(this).parent().find('.td_wrapper').each(function(index, element) {

    // SlideUp the wrapper div
    $(this).slideUp();

    // Remove padding from each td inside the selected tr
    $(this).parent().parent().find('td').each(function(index, element) {
        $(this).animate({
            'padding-top': '0px',
            'padding-bottom': '0px'
        }, function() {
            object.parentsUntil('tr').parent().remove();
        });
    });
});
2
Gianpiero Franchino

何らかの理由で、divを使用したwrapInner（）が機能しなかったため、行のフォントサイズをアニメーション化して非表示にし、フォントサイズを通常の状態に戻すという、あまり洗練されていないソリューションを作成しました行は非表示です。

    this.trs
        .animate({ 'fontSize': '1px' }, 70)
        .slideUp(1)
        .animate({ 'fontSize': '12px'}, 10)
        ;

これを使用して、fullcalendar.js + scheduler.jsカレンダービューでリソースグループの折りたたみ/展開をアニメーション化します。

0
user6269864