Як використовувати функцію slideDown (або показати) на рядку таблиці?


215

Я намагаюся додати рядок до таблиці та переглядати цей рядок, однак функція "слайддоун", здається, додає стиль дисплея: блок до рядка таблиці, який псує макет.

Будь-які ідеї, як обійти це?

Ось код:

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

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

Чи повинен це бути стіл? Будьте набагато легше без столу, я думаю.
MrChrister

fadeInі fadeOutпрацюйте над рядами таблиць і створюйте приємний альтернативний візуальний ефект (протестовано лише на Firefox)
Savage

Відповіді:


296

Анімації не підтримуються в рядках таблиці.

З "Навчання jQuery" Чеффера та Шведберга


Рядки таблиць представляють особливі перешкоди для анімації, оскільки браузери використовують різні значення (рядок таблиці та блок) для їх видимого властивості відображення. Методи .hide () та .show () без анімації завжди безпечні для використання з рядками таблиці. Починаючи з версії jQuery 1.1.3, також можуть використовуватися .fadeIn () та .fadeOut ().


Ви можете загортати вміст свого td у діві та використовувати slideDown для цього. Вам потрібно вирішити, чи варта анімація додаткової розмітки.


5
Чудово працює! Є ще незначне інше: Вам також доведеться анімувати прокладки з комірок, якщо такі є. Але це теж не велика справа.
Адріан Григоре

11
Ви можете анімувати прокладки так:$('tr').find('td').animate({padding: '0px'}, {duration: 200});
Ендрю

@Emily: Скажіть, будь ласка, конкретні рядки джерела jQuery? Мені спокуса зламати джерело для мого проекту.
Randomblue

7
Не пряма відповідь, але я виявив, що використання fadeIn / fadeOut в більшості ситуацій майже так само добре, і на рядах таблиці, здається, працює нормально.
Філ Ланаса

@PhilLaNasa Спочатку я був як "Не, це не буде добре виглядати", але потім я спробував це, і це виглядало дуже добре! Дякую за поїздку!
Кентон де Йонг

157

Я просто загортаю tr динамічно, а потім виймаю його після завершення slideUp / slideDown. Це досить невеликий накладний додавання та видалення одного або декількох тегів, а потім видалення їх, коли анімація завершена, я не бачу жодного видимого відставання, що це робить.

SlideUp :

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

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

 });

SlideDown:

$('#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, коли я взяв його плагін і віддягнув його до вищезгаданого, ура друзі.


Дякую! Якось це працювало для мене: row.find ('td'). WrapInner ('<div style = "display: none;" />').parent().prependTo('#MainTable> tbody'). Find (' td> div '). slideDown (' повільний ', функція () {var $ set = $ (це); $ set.replaceWith ($ set.contents ());});
pauloya

Єдине питання - це невелика затримка між клітинками.
Архімед Траяно

41

Ось плагін, який я написав для цього, це потребує небагато від реалізації 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

Сподіваюся, що це комусь допоможе.


Що робити, якщо я хочу додати / видалити групу рядків? Мені потрібно надати функцію Master / Detail
Volatil3

Функція зворотного дзвінка спрацьовує негайно для мене.
Джастін

Це просто очевидний показ. Хоча це чудово (хоч і не перевірено функцію зворотного дзвінка). Одного разу я знаю достатньо jQuery, щоб можна було це зробити інженером.
cartbeforehorse

1
FYI: Це, здається, порушується, якщо вміст цільового ряду - інша таблиця. Я не маю часу йти далі, але те, що я знайшов, це те, що він згортає дочірню таблицю, встановлює всі рядки на приховані, додає якісь дивні накладки, а потім не повторно розгорне ці рядки, як тільки ви зателефонуєте slideRow ('вниз').
Кріс Портер

1
Я зіткнувся з тими ж проблемами, що й інші з дочірніми таблицями, які виглядають смішно, коли дзвонять slideRow ('up'), а потім slideRow ('down'). Я зрозумів, що це через метод find ('td'), який використовується у плагіні двічі. Я змінив це на дітей ('td'), і проблеми негайно пішли. Для проблем із клітинками просто оновіть обидва екземпляри дітей ('td') дітям ('td, th').
Орегон Джефф

4

Ви можете спробувати вкласти вміст рядка в a <span>і мати свій перемикач $('#detailed_edit_row span');- трохи хакіт, але я просто перевірив його, і він працює. Я також спробував table-rowпропозицію вище, і, здавалося, не вийшло.

оновлення : я зіткнувся з цією проблемою, і з усіх ознак jQuery потребує об'єкт, на якому він виконує slideDown, щоб бути блоковим елементом. Отже, без кісток. Мені вдалося створити таблицю, де я використовував slideDown на комірці, і це зовсім не вплинуло на макет, тому я не впевнений, як налаштований ваш. Я думаю, що ваше єдине рішення - перефактурувати стіл таким чином, щоб це було нормально, коли ця клітина була блоком, або просто .show();чортова річ. Удачі.


1
Ви не можете анімувати теги tr і td. Ви повинні обгорнути вміст кожної програми з дівом, анімувати дів, а потім сховати / показати тр:<td><div style="display:block">contents</div></td>
Ендрю

4

Виберіть вміст рядка таким чином:

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

.contents () - Отримайте діти кожного елемента у наборі відповідних елементів, включаючи вузли тексту та коментарів.


Ви також повинні вибрати колонку, щоб щось подібне $('tr > td').contents().slideDown(). Переконайтесь, що весь вміст у стовпці загортається в тег, тобто <td>Some text</td>не працює. Це найпростіше рішення.
користувач2233706

3

Я трохи відстаю від часів, коли відповідаю на це, але знайшов спосіб це зробити :)

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 у теги даних таблиці. коли воно встановлено видимим, коли діва розширюється, весь ряд знижується. потім скажіть, щоб зникнути резервне копіювання (потім проміжок часу, щоб ви побачили ефект), перш ніж приховати рядок таблиці знову :)

Сподіваюся, це комусь допоможе!


3

Я вклав таблицю із прихованими рядками, які ковзають у вікні та не переглядаються при натисканні рядка.


3

Майте рядок таблиці з вкладеною таблицею:

<tr class='dummyRow' style='display: none;'>
    <td>
        <table style='display: none;'>All row content inside here</table>
    </td>
</tr>

Для слайдуВийдіть рядок:

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

Примітка: і рядок, і його вміст (ось він "table") обидва повинні бути приховані до запуску анімації.


Щоб просунутиUp рядок:

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

Другий параметр ( function()) - зворотний дзвінок.


Просто !!

Зауважте, що є також кілька параметрів, які можна додати як параметри функцій перемикання вгору / вниз (найпоширенішими є тривалість 'slow'та 'fast').


Ви насправді розміщували вміст між рядами, чи це була помилка друку?
Вінсент

2

Я обійшов це за допомогою елементів td у рядку:

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

Сам анімаційний рядок викликає дивну поведінку, переважно проблеми з асинхронною анімацією.

Для наведеного вище коду я виділяю рядок, який перетягується та опускається навколо таблиці, щоб підкреслити, що оновлення вдалося. Сподіваюся, що це комусь допоможе.


Я дістаюсьeffect is not a function
Savage

2

Я використовував запропоновані тут ідеї і стикався з деякими проблемами. Я все виправив і маю гладкий одношаровий я хочу поділитися.

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

Він використовує css на елементі td. Це зменшує висоту до 0 пікс. Таким чином, має значення лише висота вмісту новоствореної оболонки, що міститься всередині кожного елемента td.

SlideUp працює повільно. Якщо зробити це ще повільніше, ви можете зрозуміти якийсь збій. Невеликий стрибок на початку. Це через згадану настройку css. Але без цих налаштувань ряд не зменшився б у висоту. Тільки його зміст би.

Наприкінці елемент tr видаляється.

Весь рядок містить лише JQuery і не має власного Javascript.

Сподіваюся, це допомагає.

Ось приклад коду:

    <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>

Цій посаді рівно два роки. Я працював з версією jquery 3.2.0. Я перевірив код сьогодні з Chrome 73.0.3683.75, і він спрацював.
темний вітер

1

Я хочу ковзати цілими тілами, і я впорався з цією проблемою, поєднуючи ефекти зникання та слайдів.

Я робив це в 3 етапи (2-й та 3-й кроки замінюються на випадок, якщо ви хочете ковзати вниз або вгору)

  1. Призначаючи висоту тілу,
  2. Зникає все td і th,
  3. Розсувні корпуси.

Приклад slideUp:

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

Чи не впливає це на всю таблицю, а не на певний рядок?
Дикун

1

У мене були проблеми з усіма іншими пропонованими рішеннями, але я закінчив робити цю просту річ, гладку як масло.

Налаштуйте свій HTML так:

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

Потім встановіть свій JavaScript так:

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";   
  } 
}

В основному, зробіть "невидимий" рядок високою 0 пікселів, з розрізом всередині.
Використовуйте анімацію на div (не рядок), а потім встановіть висоту рядка в 1 px.

Щоб приховати рядок знову, використовуйте протилежну анімацію на діві та встановіть висоту рядка назад на 0px.


1

Мені сподобався плагін, який написала і використовує Вінні. Але у випадку таблиць всередині розсувного рядка (tr / td) рядки вкладеної таблиці завжди приховуються навіть після прокручування вгору. Тому я зробив швидкий і простий злом у плагіні, щоб не приховувати рядки вкладеної таблиці. Просто змініть наступний рядок

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

до

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

який знаходить лише негайні tds, які не вкладені. Сподіваємось, це допомагає комусь, що використовує плагін і має вкладені таблиці.


1

Я хотів би додати коментар до допису # Вінні, але у вас немає відповіді, тому я мушу опублікувати відповідь ...

Знайдена помилка з вашим плагіном - коли ви просто передаєте об'єкт з аргументами, вони перезаписуються, якщо не передаються інші аргументи. Легко вирішується, змінюючи порядок обробки аргументів, кодуйте нижче. Я також додав варіант для знищення рядка після закриття (лише тоді, як у мене була потреба в ньому!): $ ('# Row_id'). SlideRow ('up', true); // руйнує рядок

(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);

Забув згадати, я також додав до дітей та виправлень
Марк Бал

0

Якщо вам потрібно одночасно просунути та зменшити рядки таблиці, спробуйте скористатися цими:

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');
        });
});
});

0
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);
  }
});

0

Я можу зробити, якщо ви встановите td у рядку, щоб він не відображався одночасно, коли ви починаєте анімувати висоту в рядку

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;
    }
}

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>

0

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();
    }
});

});


Це показує та приховує поділ, що містить таблицю. Не табличний рядок, як просив ОП.
shazbot

0

Пропозиція, яку пропонує Вінні, насправді близька, але я знайшов і виправив пару невеликих проблем.

  1. Він жадібно орієнтований на елементи td, що виходять за межі лише дітей ряду. Це було б добре, якби тоді вони шукали цих дітей, коли показували рядок. Поки він наблизився, всі вони закінчилися "дисплеєм: жоден" на них, вивівши їх прихованими.
  2. Він взагалі не орієнтувався на дочірні елементи.
  3. Для комірок таблиці з великим вмістом (наприклад, вкладеної таблиці з великою кількістю рядків), що викликає slideRow ('вгору'), незалежно від наданого значення 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);

@circuitry, чи було у вас щось конкретне, або ваша критика достатня?
Орегон Джефф

@Oregoneff Просто чесно. Я шукаю щось простіше. Не слід приймати 109 рядків коду, щоб ковзати рядок таблиці.
контур

@circuitry, це не стає простішим, якщо ви хочете мати можливість використовувати як плагін (а не просто брати участь у поганій практиці використання конкретного коду) з можливістю контролю швидкості, ослаблення та зворотних викликів на налаштовуваному основа. Оскільки це щось, що ви б включили у свою бібліотеку кодів і можна використовувати для будь-якої реалізації, яка вимагає розширення / згортання рядків таблиці, я не впевнений, чому це важливо, що це 109 рядків коду.
Орегон Джефф

0

Швидке / легке виправлення:

Використовуйте JQuery .toggle (), щоб показати / приховати рядки onclick або рядка, або якоря.

Буде потрібно записати функцію для ідентифікації рядків, які ви хотіли б приховати, але перемикання створює потрібну функціональність.


Я думаю, що це було запропоновано у цій відповіді ...
DarkCygnus
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.