كيفية استخدام وظيفة SlideDown (أو العرض) في صف الجدول؟

https://stackoverflow.com/questions/467336

19-08-2019
|

سؤال

أحاول إضافة صف إلى جدول وعرض شريحة الصف هذه للعرض، ولكن يبدو أن وظيفة الانزلاق لأسفل تضيف نمط عرض: كتلة إلى صف الجدول مما يؤدي إلى إفساد التخطيط.

أي أفكار حول كيفية التغلب على هذا؟

إليك الكود:

$.get('/some_url', 
  { 'val1': id },

  function (data) {
    var row = $('#detailed_edit_row');
    row.hide();
    row.html(data);
    row.slideDown(1000);
  }
);

المحلول

غير معتمدة

ومتحركة على صفوف الجدول.

ومن "التعلم مسج" من المساومة وSwedberg

<اقتباس فقرة>

والصفوف الجدول تظهر معينة العقبات التي تعترض الحركة، منذ المتصفحات استخدام قيم مختلفة (الجدول الصف و كتلة) للعرض على مرئية خاصية. و.hide () و. تظهر () طرق، من دون الرسوم المتحركة، ودائما آمنة للاستخدام مع صفوف الجدول. اعتبارا من مسج النسخة 1.1.3، .fadeIn () و .fadeOut () يمكن استخدامها أيضا.

ويمكنك لف المحتويات الخاصة بك TD في شعبة واستخدام slideDown على ذلك. عليك أن تقرر إذا كانت الرسوم المتحركة يستحق ترميز إضافية.

نصائح أخرى

أقوم ببساطة بلف tr ديناميكيًا ثم أقوم بإزالته بمجرد اكتمال SlideUp/slideDown.إنها تكلفة بسيطة جدًا تتمثل في إضافة وإزالة علامة أو اثنتين من العلامات ثم إزالتها بمجرد اكتمال الرسوم المتحركة، ولا أرى أي تأخير واضح على الإطلاق في القيام بذلك.

ينزلق للأعلى:

$('#my_table > tbody > tr.my_row')
 .find('td')
 .wrapInner('<div style="display: block;" />')
 .parent()
 .find('td > div')
 .slideUp(700, function(){

  $(this).parent().parent().remove();

 });

تنزلق:

$('#my_table > tbody > tr.my_row')
 .find('td')
 .wrapInner('<div style="display: none;" />')
 .parent()
 .find('td > div')
 .slideDown(700, function(){

  var $set = $(this);
  $set.replaceWith($set.contents());

 });

لا بد لي من الإشادة بموقع fletchzone.com لأنني أخذت المكون الإضافي الخاص به وقمت بتجريده مرة أخرى إلى ما ورد أعلاه، تحياتي لك يا صديقي.

إليك مكونًا إضافيًا كتبته لهذا الغرض، وهو يتطلب القليل من تنفيذ Fletch، ولكن يتم استخدامي فقط لتحريك صف لأعلى أو لأسفل (بدون إدراج صفوف).

(function($) {
var sR = {
    defaults: {
        slideSpeed: 400,
        easing: false,
        callback: false     
    },
    thisCallArgs: {
        slideSpeed: 400,
        easing: false,
        callback: false
    },
    methods: {
        up: function (arg1,arg2,arg3) {
            if(typeof arg1 == 'object') {
                for(p in arg1) {
                    sR.thisCallArgs.eval(p) = arg1[p];
                }
            }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                sR.thisCallArgs.slideSpeed = arg1;
            }else{
                sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
            }

            if(typeof arg2 == 'string'){
                sR.thisCallArgs.easing = arg2;
            }else if(typeof arg2 == 'function'){
                sR.thisCallArgs.callback = arg2;
            }else if(typeof arg2 == 'undefined') {
                sR.thisCallArgs.easing = sR.defaults.easing;    
            }
            if(typeof arg3 == 'function') {
                sR.thisCallArgs.callback = arg3;
            }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                sR.thisCallArgs.callback = sR.defaults.callback;    
            }
            var $cells = $(this).find('td');
            $cells.wrapInner('<div class="slideRowUp" />');
            var currentPadding = $cells.css('padding');
            $cellContentWrappers = $(this).find('.slideRowUp');
            $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({
                                                                                                                paddingTop: '0px',
                                                                                                                paddingBottom: '0px'},{
                                                                                                                complete: function () {
                                                                                                                    $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
                                                                                                                    $(this).parent().css({'display':'none'});
                                                                                                                    $(this).css({'padding': currentPadding});
                                                                                                                }});
            var wait = setInterval(function () {
                if($cellContentWrappers.is(':animated') === false) {
                    clearInterval(wait);
                    if(typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
                }
            }, 100);                                                                                                    
            return $(this);
        },
        down: function (arg1,arg2,arg3) {
            if(typeof arg1 == 'object') {
                for(p in arg1) {
                    sR.thisCallArgs.eval(p) = arg1[p];
                }
            }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                sR.thisCallArgs.slideSpeed = arg1;
            }else{
                sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
            }

            if(typeof arg2 == 'string'){
                sR.thisCallArgs.easing = arg2;
            }else if(typeof arg2 == 'function'){
                sR.thisCallArgs.callback = arg2;
            }else if(typeof arg2 == 'undefined') {
                sR.thisCallArgs.easing = sR.defaults.easing;    
            }
            if(typeof arg3 == 'function') {
                sR.thisCallArgs.callback = arg3;
            }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                sR.thisCallArgs.callback = sR.defaults.callback;    
            }
            var $cells = $(this).find('td');
            $cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
            $cellContentWrappers = $cells.find('.slideRowDown');
            $(this).show();
            $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });

            var wait = setInterval(function () {
                if($cellContentWrappers.is(':animated') === false) {
                    clearInterval(wait);
                    if(typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
                }
            }, 100);
            return $(this);
        }
    }
};

$.fn.slideRow = function(method,arg1,arg2,arg3) {
    if(typeof method != 'undefined') {
        if(sR.methods[method]) {
            return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1));
        }
    }
};
})(jQuery);

الاستخدام الأساسي:

$('#row_id').slideRow('down');
$('#row_id').slideRow('up');

تمرير خيارات الشريحة كوسائط فردية:

$('#row_id').slideRow('down', 500); //slide speed
$('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // slide speed and callback function
$('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); slide speed, easing option and callback function
$('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); //options passed as object

بشكل أساسي، بالنسبة للرسوم المتحركة للشريحة لأسفل، يقوم المكون الإضافي بتغليف محتويات الخلايا في DIVs، ثم يقوم بتحريكها، ثم يقوم بإزالتها، والعكس صحيح بالنسبة للشريحة لأعلى (مع بعض الخطوات الإضافية للتخلص من حشوة الخلية).كما أنه يعيد الكائن الذي قمت باستدعاءه عليه، حتى تتمكن من تسلسل التوابع مثل:

$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red

أمل أن هذا يساعد شخصاما.

هل يمكن أن محاولة التفاف محتويات صف في <span>، وبعد أن $('#detailed_edit_row span'); محدد الخاص بك - hackish قليلا، ولكن لقد اختبرت وانها تعمل. كما أنني حاولت اقتراح table-row أعلاه وأنه لا يبدو للعمل.

على تحديث : للقد لعب حولها مع هذه المشكلة، ومن كل المؤشرات مسج يحتاج الكائن ينفذ slideDown على أن يكون عنصر كتلة. لذلك، لا الزهر. وكنت قادرا على استحضار جدول حيث اعتدت slideDown على خلية وأنها لم تؤثر على تخطيط في كل شيء، لذلك أنا لست متأكدا من كيفية تعيين لك حتى. أعتقد أن الحل الوحيد هو ريفاكتور الجدول في مثل هذه الطريقة أنه على ما يرام مع تلك الخلية كونها كتلة، أو مجرد .show(); الشيء اللعين. حظا سعيدا.

وحدد محتويات الصف مثل هذا:

$(row).contents().slideDown();

.contents () - الحصول على أطفال من كل عنصر في مجموعة من العناصر المتطابقة، بما في ذلك النص والتعليق عليه العقد.

وأنا قليلا وراء مرات على الإجابة عن هذا، لكنني وجدت طريقة للقيام بذلك:)

function eventinfo(id) {
    tr = document.getElementById("ei"+id);
    div = document.getElementById("d"+id);
    if (tr.style.display == "none") {
        tr.style.display="table-row";
        $(div).slideDown('fast');
    } else {
        $(div).slideUp('fast');
        setTimeout(function(){tr.style.display="none";}, 200);
    }
}

وأنا فقط وضعت عنصر div داخل العلامات بيانات الجدول. عندما يتم تعيين وضوحا، مع توسع شعبة، الصف كله ينزل. ثم يقول أن تتلاشى احتياطية (ثم مهلة حتى ترى النتيجة) قبل إخفاء الصف الجدول مرة أخرى:)

ويساعد هذا الأمل شخص!

وايم مبتدئ في هذا المجتمع. رر معدل جوابي. :)

ويمكنك العثور على هذا واحد يعمل بشكل جيد.

وايم وجود الجدول (<table style='display: none;'></table>)

وداخل محتوى <tr class='dummyRow' style='display: none;'><td></td></tr>.

لتنزلق الصف ..

$('.dummyRow').show().find("table").slideDown();

ملحوظة: صف واحد ومضمون داخل الصف (هنا هو table) يجب أن تكون مخفية على حد سواء قبل بدء الحركة

لتنزلق حتى الصف ..

$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});

والمعلمة الثانية (وظيفة) هي رد.

وبسيط !!

ولقد حصلت حول هذا باستخدام عناصر الدفتيريا في الصف:

$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);

وموحية الصف نفسه يسبب السلوك الغريب، ومشاكل الرسوم المتحركة في الغالب المتزامن.

لرمز أعلاه، وأنا تسليط الضوء على التوالي الذي ينزلق ويسقط حولها في الجدول لتمييز هذا التحديث قد نجحت. آمل أن يساعد هذا شخص.

وأنا neded جدول مع الصفوف المخفية التي تنزلق داخل وخارج نظر على التوالي نقرة.

$('.tr-show-sub').click(function(e) {  
    var elOne = $(this);
    $('.tr-show-sub').each(function(key, value) {
        var elTwoe = $(this);
        
        if(elOne.get(0) !== elTwoe.get(0)) {
            if($(this).next('.tr-sub').hasClass('tr-sub-shown')) {
                elTwoe.next('.tr-sub').removeClass('tr-sub-shown');
                elTwoe.next('tr').find('td').find('div').slideUp();
                elTwoe.next('tr').find('td').slideUp();
            }
        }
        
        if(elOne.get(0) === elTwoe.get(0)) {
            if(elOne.next('.tr-sub').hasClass('tr-sub-shown')) {
                elOne.next('.tr-sub').removeClass('tr-sub-shown');
                elOne.next('tr').find('td').find('div').slideUp();
                elOne.next('tr').find('td').slideUp();
            } else {
                elOne.next('.tr-sub').addClass('tr-sub-shown');
                elOne.next('tr').find('td').slideDown();
                elOne.next('tr').find('td').find('div').slideDown();
            }
        }
    })
});

body {
        background: #eee;
    }
    
    .wrapper {
        margin: auto;
        width: 50%;
        padding: 10px;
        margin-top: 10%;
    }
    
    table {
        background: white;
        width: 100%;
    }
    
    table th {
        background: gray;
        text-align: left;
    }
    
    table th, td {
        border-bottom: 1px solid lightgray;
        padding: 5px;
    }
    
    table .tr-show-sub {
        background: #EAEAEA;
        cursor: pointer;
    }

    table .tr-sub td {
        display: none;
    }
    
    table .tr-sub td .div-sub {
        display: none;
    }

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="wrapper">
    <table cellspacing="0" cellpadding="3">
        <thead>
            <tr class="table">
                <th>col 1</th>
                <th>col 2</th>
                <th>col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr class="tr-show-sub">
                <td>col 1</td>
                <td>col 2</td>
                <td>col 3</td>
            </tr>
            <tr class="tr-sub">
                <td colspan="5"><div class="div-sub">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem. 
                </div></td>
            </tr>
            <tr class="tr-show-sub">
                <td>col 1</td>
                <td>col 2</td>
                <td>col 3</td>
            </tr>
            <tr class="tr-sub">
                <td colspan="5"><div class="div-sub">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem. 
                </div></td>
            </tr>
            <tr>
                <td>col 1</td>
                <td>col 2</td>
                <td>col 3</td>
            </tr>
        </tbody>
    </table>
</div>

وفعلت استخدام الأفكار المقدمة هنا واجهت بعض المشاكل. أنا ثابت كل منهم ويكون على نحو سلس أونيلينير أود أن مشاركة.

$('#row_to_slideup').find('> td').css({'height':'0px'}).wrapInner('<div style=\"display:block;\" />').parent().find('td > div').slideUp('slow', function() {$(this).parent().parent().remove();});

ويستخدم المغلق على العنصر الدفتيريا. فهو يقلل من ارتفاع ل0px. بهذه الطريقة فقط ارتفاع محتوى تم إنشاؤه حديثا شعبة-المجمع داخل كل المسائل العنصر الدفتيريا.

ووslideUp على بطيئة. اذا كنت تجعل من أبطأ حتى قد كنت أدرك بعض خلل. قفزة صغيرة في البداية. وذلك لأن من الإعداد المغلق المذكورة. ولكن من دون هذه الإعدادات سوف الصف ولا تنقص في الارتفاع. فقط محتواه من شأنه.

وفي نهاية يحصل على إزالة عنصر طن تبريد.

والخط كله يحتوي فقط مسج وليس جافا سكريبت الأصلي.

ونأمل أن يساعد.

وهنا هو رمز المثال:

    <html>
            <head>
                    <script src="https://code.jquery.com/jquery-3.2.0.min.js">               </script>
            </head>
            <body>
                    <table>
                            <thead>
                                    <tr>
                                            <th>header_column 1</th>
                                            <th>header column 2</th>
                                    </tr>
                            </thead>
                            <tbody>
                                    <tr id="row1"><td>row 1 left</td><td>row 1 right</td></tr>
                                    <tr id="row2"><td>row 2 left</td><td>row 2 right</td></tr>
                                    <tr id="row3"><td>row 3 left</td><td>row 3 right</td></tr>
                                    <tr id="row4"><td>row 4 left</td><td>row 4 right</td></tr>
                            </tbody>
                    </table>
                    <script>
    setTimeout(function() {
    $('#row2').find('> td').css({'height':'0px'}).wrapInner('<div style=\"display:block;\" />').parent().find('td > div').slideUp('slow',         function() {$(this).parent().parent().remove();});
    }, 2000);
                    </script>
            </body>
    </html>

أرغب في تحريك الجسم بالكامل وقد تمكنت من إدارة هذه المشكلة من خلال الجمع بين تأثيرات التلاشي والانزلاق.

لقد قمت بذلك على 3 مراحل (يتم استبدال الخطوتين الثانية والثالثة في حالة رغبتك في الانزلاق لأسفل أو لأعلى)

تعيين الارتفاع إلى tbody،
يتلاشى كل td و ال ،
انزلاق الجسم.

مثال على SlideUp:

tbody.css('height', tbody.css('height'));
tbody.find('td, th').fadeOut(200, function(){
    tbody.slideUp(300)
});

وكان لي مشاكل مع كل الحلول الأخرى التي تقدمها ولكن انتهى به هذا شيء بسيط هو أن سلس كما الزبد.

وإعداد HTML الخاص بك مثل ذلك:

<tr id=row1 style='height:0px'><td>
  <div id=div1 style='display:none'>
    Hidden row content goes here
  </div>
</td></tr>

ثم قم بإعداد جافا سكريبت الخاصة مثل ذلك:

function toggleRow(rowid){
  var row = document.getElementById("row" + rowid)

  if(row.style.height == "0px"){
      $('#div' + rowid).slideDown('fast');
      row.style.height = "1px";   
  }else{
      $('#div' + rowid).slideUp('fast');
      row.style.height = "0px";   
  } 
}

والأساس، وجعل "غير مرئية" الصف 0px عالية، مع شعبة الداخل.
استخدام الرسوم المتحركة في شعبة (وليس صف) ثم قم بتعيين ارتفاع الصف إلى 1PX.

لإخفاء الصف مرة أخرى، استخدم الرسوم المتحركة المعاكس على شعبة وتعيين ارتفاع الصف الخلفي ل0px.

وأنا أحب أن البرنامج المساعد لفيني المكتوبة ولقد تم استخدام. ولكن في حالة الجداول داخل انزلاق صف (آر / الدفتيريا)، وصفوف من جدول متداخل مخفية دائما حتى بعد تراجع تصل. هكذا فعلت الإختراق سريعة وبسيطة في البرنامج المساعد ليس لإخفاء الصفوف من جدول متداخل. مجرد تغيير السطر التالي

var $cells = $(this).find('td');

إلى

var $cells = $(this).find('> td');

والذي يجد فقط TDS فورية لا متداخلة منها. آمل أن يساعد هذا شخص ما باستخدام البرنامج المساعد وومتداخلة الجداول.

وأود أن أضيف تعليق على # آخر فيني ولكن لا تملك مندوب بحيث يكون لنشر إجابة ...

وجدت خطأ مع البرنامج المساعد الخاص بك - عندما كنت مجرد تمرير كائن في بحجج يحصلون على الكتابة إذا يتم تمرير أي حجج أخرى في حلها بسهولة عن طريق تغيير النظام تتم معالجة الحجج، رمز أدناه. لقد أضاف أيضا خيار لتدمير التوالي بعد إغلاق (فقط كما كان لي حاجة لذلك!): $ ( '# row_id') slideRow ( 'حتى'، صحيح)؛ // يدمر الصف

(function ($) {
    var sR = {
        defaults: {
            slideSpeed: 400,
            easing: false,
            callback: false
        },
        thisCallArgs: {
            slideSpeed: 400,
            easing: false,
            callback: false,
            destroyAfterUp: false
        },
        methods: {
            up: function (arg1, arg2, arg3) {
                if (typeof arg2 == 'string') {
                    sR.thisCallArgs.easing = arg2;
                } else if (typeof arg2 == 'function') {
                    sR.thisCallArgs.callback = arg2;
                } else if (typeof arg2 == 'undefined') {
                    sR.thisCallArgs.easing = sR.defaults.easing;
                }
                if (typeof arg3 == 'function') {
                    sR.thisCallArgs.callback = arg3;
                } else if (typeof arg3 == 'undefined' && typeof arg2 != 'function') {
                    sR.thisCallArgs.callback = sR.defaults.callback;
                }
                if (typeof arg1 == 'object') {
                    for (p in arg1) {
                        sR.thisCallArgs[p] = arg1[p];
                    }
                } else if (typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                    sR.thisCallArgs.slideSpeed = arg1;
                } else if (typeof arg1 != 'undefined' && (typeof arg1 == 'boolean')) {
                    sR.thisCallArgs.destroyAfterUp = arg1;
                } else {
                    sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
                }

                var $row = $(this);
                var $cells = $row.children('th, td');
                $cells.wrapInner('<div class="slideRowUp" />');
                var currentPadding = $cells.css('padding');
                $cellContentWrappers = $(this).find('.slideRowUp');
                $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing).parent().animate({
                    paddingTop: '0px',
                    paddingBottom: '0px'
                }, {
                    complete: function () {
                        $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
                        $(this).parent().css({ 'display': 'none' });
                        $(this).css({ 'padding': currentPadding });
                    }
                });
                var wait = setInterval(function () {
                    if ($cellContentWrappers.is(':animated') === false) {
                        clearInterval(wait);
                        if (sR.thisCallArgs.destroyAfterUp)
                        {
                            $row.replaceWith('');
                        }
                        if (typeof sR.thisCallArgs.callback == 'function') {
                            sR.thisCallArgs.callback.call(this);
                        }
                    }
                }, 100);
                return $(this);
            },
            down: function (arg1, arg2, arg3) {

                if (typeof arg2 == 'string') {
                    sR.thisCallArgs.easing = arg2;
                } else if (typeof arg2 == 'function') {
                    sR.thisCallArgs.callback = arg2;
                } else if (typeof arg2 == 'undefined') {
                    sR.thisCallArgs.easing = sR.defaults.easing;
                }
                if (typeof arg3 == 'function') {
                    sR.thisCallArgs.callback = arg3;
                } else if (typeof arg3 == 'undefined' && typeof arg2 != 'function') {
                    sR.thisCallArgs.callback = sR.defaults.callback;
                }
                if (typeof arg1 == 'object') {
                    for (p in arg1) {
                        sR.thisCallArgs.eval(p) = arg1[p];
                    }
                } else if (typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                    sR.thisCallArgs.slideSpeed = arg1;
                } else {
                    sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
                }

                var $cells = $(this).children('th, td');
                $cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
                $cellContentWrappers = $cells.find('.slideRowDown');
                $(this).show();
                $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function () { $(this).replaceWith($(this).contents()); });

                var wait = setInterval(function () {
                    if ($cellContentWrappers.is(':animated') === false) {
                        clearInterval(wait);
                        if (typeof sR.thisCallArgs.callback == 'function') {
                            sR.thisCallArgs.callback.call(this);
                        }
                    }
                }, 100);
                return $(this);
            }
        }
    };

    $.fn.slideRow = function (method, arg1, arg2, arg3) {
        if (typeof method != 'undefined') {
            if (sR.methods[method]) {
                return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            }
        }
    };
})(jQuery);

إذا كنت بحاجة إلى الانزلاق وتتلاشى صف جدول في نفس الوقت، حاول استخدام التالية:

jQuery.fn.prepareTableRowForSliding = function() {
    $tr = this;
    $tr.children('td').wrapInner('<div style="display: none;" />');
    return $tr;
};

jQuery.fn.slideFadeTableRow = function(speed, easing, callback) {
    $tr = this;
    if ($tr.is(':hidden')) {
        $tr.show().find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    } else {
        $tr.find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function(){
            $tr.hide();
            callback();
        });
    }
    return $tr;
};

$(document).ready(function(){
    $('tr.special').hide().prepareTableRowForSliding();
    $('a.toggle').toggle(function(){
        $button = $(this);
        $tr = $button.closest('tr.special'); //this will be specific to your situation
        $tr.slideFadeTableRow(300, 'swing', function(){
            $button.text('Hide table row');
        });
    }, function(){
        $button = $(this);
        $tr = $button.closest('tr.special'); //this will be specific to your situation
        $tr.slideFadeTableRow(300, 'swing', function(){
            $button.text('Display table row');
        });
});
});

function hideTr(tr) {
  tr.find('td').wrapInner('<div style="display: block;" />').parent().find('td > div').slideUp(50, function () {
    tr.hide();
    var $set = jQuery(this);
    $set.replaceWith($set.contents());
  });
}

function showTr(tr) {
  tr.show()
  tr.find('td').wrapInner('<div style="display: none;" />').parent().find('td > div').slideDown(50, function() {
    var $set = jQuery(this);
    $set.replaceWith($set.contents());
  });
}

ويمكنك استخدام هذه الأساليب مثل:

jQuery("[data-toggle-tr-trigger]").click(function() {
  var $tr = jQuery(this).parents(trClass).nextUntil(trClass);
  if($tr.is(':hidden')) {
    showTr($tr);
  } else {
    hideTr($tr);
  }
});

وأنا يمكن أن يتم إذا قمت بتعيين الدفتيريا في صف واحد لعرض أي في نفس الوقت أن تبدأ موحية ارتفاع على التوالي

tbody tr{
    min-height: 50px;
}
tbody tr.ng-hide td{
    display: none;
}
tr.hide-line{
    -moz-transition: .4s linear all;
    -o-transition: .4s linear all;
    -webkit-transition: .4s linear all;
    transition: .4s linear all;
    height: 50px;
    overflow: hidden;

    &.ng-hide { //angularJs specific
        height: 0;
        min-height: 0;
    }
}

ويعمل هذا الرمز!

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <title></title>
        <script>
            function addRow() {
                $('.displaynone').show();
                $('.displaynone td')
                .wrapInner('<div class="innerDiv" style="height:0" />');
                $('div').animate({"height":"20px"});
            }
        </script>
        <style>
            .mycolumn{border: 1px solid black;}
            .displaynone{display: none;}
        </style>
    </head>
    <body>
        <table align="center" width="50%">
            <tr>
                <td class="mycolumn">Row 1</td>
            </tr>
            <tr>
                <td class="mycolumn">Row 2</td>
            </tr>
            <tr class="displaynone">
                <td class="mycolumn">Row 3</td>
            </tr>
            <tr>
                <td class="mycolumn">Row 4</td>
            </tr>
        </table>
        <br>
        <button onclick="addRow();">add</button>    
    </body>
</html>

http://jsfiddle.net/PvwfK/136/

<table cellspacing='0' cellpadding='0' class='table01' id='form_table' style='width:100%;'>
<tr>
    <td style='cursor:pointer; width:20%; text-align:left;' id='header'>
        <label style='cursor:pointer;'> <b id='header01'>▲ Customer Details</b>

        </label>
    </td>
</tr>
<tr>
    <td style='widtd:20%; text-align:left;'>
        <div id='content' class='content01'>
            <table cellspacing='0' cellpadding='0' id='form_table'>
                <tr>
                    <td>A/C ID</td>
                    <td>:</td>
                    <td>3000/A01</td>
                </tr>
                <tr>
                    <td>A/C ID</td>
                    <td>:</td>
                    <td>3000/A01</td>
                </tr>
                <tr>
                    <td>A/C ID</td>
                    <td>:</td>
                    <td>3000/A01</td>
                </tr>
            </table>
        </div>
    </td>
</tr>

$(function () {
$(".table01 td").on("click", function () {
    var $rows = $('.content01');
    if ($(".content01:first").is(":hidden")) {
        $("#header01").text("▲ Customer Details");
        $(".content01:first").slideDown();
    } else {
        $("#header01").text("▼ Customer Details");
        $(".content01:first").slideUp();
    }
});

و})؛

المكونات التي تقدمها فيني هي حقًا أغلق، لكنني وجدت وأصلحت بعض المشكلات الصغيرة.

لقد استهدف بجشع عناصر td بما يتجاوز مجرد إخفاء أبناء الصف.كان من الممكن أن يكون هذا أمرًا جيدًا إذا تم البحث عن هؤلاء الأطفال عند إظهار الصف.بينما اقتربت، انتهى بهم الأمر جميعًا بـ "display:لا شيء" عليهم، مما يجعلها مخفية.
لم يستهدف العناصر الفرعية على الإطلاق.

بالنسبة لخلايا الجدول التي تحتوي على الكثير من المحتوى (مثل جدول متداخل يحتوي على الكثير من الصفوف)، فإن استدعاء SlideRow('up')، بغض النظر عن قيمة SlideSpeed المقدمة، سيؤدي إلى طي عرض الصف بمجرد الانتهاء من الرسوم المتحركة المتروكة .لقد قمت بإصلاحه بحيث لا يتم تشغيل الرسوم المتحركة المتروكة حتى تنتهي طريقة SlideUp() الموجودة على الغلاف.

(function($){
    var sR = {
        defaults: {
            slideSpeed: 400
          , easing: false
          , callback: false
        }
      , thisCallArgs:{
            slideSpeed: 400
          , easing: false
          , callback: false
        }
      , methods:{
            up: function(arg1, arg2, arg3){
                if(typeof arg1 == 'object'){
                    for(p in arg1){
                        sR.thisCallArgs.eval(p) = arg1[p];
                    }
                }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){
                    sR.thisCallArgs.slideSpeed = arg1;
                }else{
                    sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
                }

                if(typeof arg2 == 'string'){
                    sR.thisCallArgs.easing = arg2;
                }else if(typeof arg2 == 'function'){
                    sR.thisCallArgs.callback = arg2;
                }else if(typeof arg2 == 'undefined'){
                    sR.thisCallArgs.easing = sR.defaults.easing;    
                }
                if(typeof arg3 == 'function'){
                    sR.thisCallArgs.callback = arg3;
                }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                    sR.thisCallArgs.callback = sR.defaults.callback;    
                }
                var $cells = $(this).children('td, th');
                $cells.wrapInner('<div class="slideRowUp" />');
                var currentPadding = $cells.css('padding');
                $cellContentWrappers = $(this).find('.slideRowUp');
                $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function(){
                    $(this).parent().animate({ paddingTop: '0px', paddingBottom: '0px' }, {
                        complete: function(){
                            $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
                            $(this).parent().css({ 'display': 'none' });
                            $(this).css({ 'padding': currentPadding });
                        }
                    });
                });
                var wait = setInterval(function(){
                    if($cellContentWrappers.is(':animated') === false){
                        clearInterval(wait);
                        if(typeof sR.thisCallArgs.callback == 'function'){
                            sR.thisCallArgs.callback.call(this);
                        }
                    }
                }, 100);                                                                                                    
                return $(this);
            }
          , down: function (arg1, arg2, arg3){
                if(typeof arg1 == 'object'){
                    for(p in arg1){
                        sR.thisCallArgs.eval(p) = arg1[p];
                    }
                }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){
                    sR.thisCallArgs.slideSpeed = arg1;
                }else{
                    sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
                }

                if(typeof arg2 == 'string'){
                    sR.thisCallArgs.easing = arg2;
                }else if(typeof arg2 == 'function'){
                    sR.thisCallArgs.callback = arg2;
                }else if(typeof arg2 == 'undefined'){
                    sR.thisCallArgs.easing = sR.defaults.easing;    
                }
                if(typeof arg3 == 'function'){
                    sR.thisCallArgs.callback = arg3;
                }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                    sR.thisCallArgs.callback = sR.defaults.callback;    
                }
                var $cells = $(this).children('td, th');
                $cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
                $cellContentWrappers = $cells.find('.slideRowDown');
                $(this).show();
                $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });

                var wait = setInterval(function(){
                    if($cellContentWrappers.is(':animated') === false){
                        clearInterval(wait);
                        if(typeof sR.thisCallArgs.callback == 'function'){
                            sR.thisCallArgs.callback.call(this);
                        }
                    }
                }, 100);
                return $(this);
            }
        }
    };

    $.fn.slideRow = function(method, arg1, arg2, arg3){
        if(typeof method != 'undefined'){
            if(sR.methods[method]){
                return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            }
        }
    };
})(jQuery);

وسريع / حل سهل:

استخدم مسج .toggle () لإظهار / إخفاء الصفوف عند _ النقر إما صف أو مرساة.

وسوف تحتاج وظيفة المراد كتابتها إلى تحديد الصفوف التي تريد خفية، ولكن تبديل يخلق الوظائف التي يبحثون عنها.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow