Как использовать функцию slideDown (или show) для строки таблицы?


215

Я пытаюсь добавить строку в таблицу и сделать так, чтобы эта строка скользила в поле зрения, однако функция слайдера, кажется, добавляет стиль display: block к строке таблицы, которая портит макет.

Есть идеи, как обойти это?

Вот код:

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

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

Это должен быть стол? Думаю, без таблицы будет намного проще.
MrChrister

fadeInи fadeOutработайте над строками таблицы и
Savage

Ответы:


296

Анимации не поддерживаются в строках таблицы.

Из "Обучения jQuery" Чеффера и Сведберга


Строки таблицы представляют определенные препятствия для анимации, так как браузеры используют разные значения (таблица-строка и блок) для их видимого свойства отображения. Методы .hide () и .show () без анимации всегда безопасны для использования со строками таблицы. Начиная с версии jQuery 1.1.3, .fadeIn () и .fadeOut () также могут быть использованы.


Вы можете обернуть содержимое td в div и использовать слайддон на этом. Вам нужно решить, стоит ли анимация дополнительной разметки.


5
Прекрасно работает! Есть еще один минус: вам также придется анимировать заполнение ячейки, если оно есть. Но это тоже не имеет большого значения.
Адриан Григор

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

@ Эмили: Не могли бы вы указать конкретные строки источника JQuery? Я испытываю желание взломать источник для моего проекта.
Randomblue

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

@PhilLaNasa Сначала я говорил: «Нет, это не будет хорошо выглядеть», но потом я попробовал это, и это выглядело действительно хорошо! Спасибо за поездку!
Кентон де Йонг

157

Я просто обертываю tr динамически, затем удаляю его, когда слайд-слайд / слайд-нон завершен. Это довольно небольшие затраты на добавление и удаление одного или нескольких тегов, а затем их удаление после завершения анимации. Я не вижу никаких видимых задержек при этом.

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

 });

Скользить вниз:

$('#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 (' slow ', function () {var $ set = $ (this); $ 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

По сути, для анимации скольжения плагин оборачивает содержимое ячеек в DIV, анимирует их, затем удаляет их и наоборот для слайда вверх (с некоторыми дополнительными шагами, чтобы избавиться от заполнения ячеек). Он также возвращает объект, для которого вы его вызвали, так что вы можете связать методы следующим образом:

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

Надеюсь, это кому-нибудь поможет.


Что если я хочу добавить / удалить группу строк? Мне нужно дать функциональность Master / Detail
Volatil3

Функция обратного вызова срабатывает сразу для меня.
Джастин

Это просто похвастаться. Работает потрясающе (хотя еще не проверял функциональность обратного вызова). Однажды я буду знать достаточно jQuery, чтобы иметь возможность перепроектировать это.
телега верховая лошадь

1
К вашему сведению: это может сломаться, если содержимое целевой строки представляет собой другую таблицу. У меня нет времени, чтобы пойти дальше, но я обнаружил, что он свернул дочернюю таблицу, установил скрытие всех строк, добавил странные отступы, а затем не расширил эти строки после вызова slideRow. ('вниз').
Крис Портер

1
Я столкнулся с теми же проблемами, что и другие, с дочерними таблицами, ведущими себя забавно при вызове slideRow («вверх») и затем slideRow («вниз»). Я понял, что это из-за метода find ('td'), который дважды используется в плагине. Я изменил это на детей ('td'), и проблемы сразу ушли. При возникновении проблем с th-ячейками просто обновите оба экземпляра children ('td') до children ('td, th').
OregonJeff

4

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

обновление : я играл с этой проблемой, и, судя по всему, jQuery нужен объект, над которым он выполняет slideDown, чтобы быть элементом блока. Так что, без игры в кости. Мне удалось создать таблицу, в которой я использовал slideDown для ячейки, и это никак не повлияло на макет, поэтому я не уверен, как настроена ваша. Я думаю, что ваше единственное решение состоит в том, чтобы реорганизовать таблицу таким образом, чтобы все было нормально, если бы эта ячейка была блоком или просто .show();чертовой штукой. Удачи.


1
Вы не можете анимировать теги tr и td. Вы должны обернуть содержимое каждого тд с помощью div, затем оживить div, а затем спрятать / показать tr:<td><div style="display:block">contents</div></td>
Андрей

4

Выберите содержимое строки следующим образом:

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

.contents () - Получить дочерние элементы каждого элемента в наборе соответствующих элементов, включая узлы текста и комментариев.


Вы также должны выбрать столбец, так что-то вроде $('tr > td').contents().slideDown(). Убедитесь, что весь контент внутри столбца заключен в тег, т. Е. Не <td>Some text</td>будет работать. Это самое простое решение.
user2233706

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 в теги данных таблицы. когда он становится видимым, когда 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") должны быть скрыты до начала анимации.


Чтобы сдвинуть строку вверх :

$('.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
Дикарь

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. Уменьшает высоту до 0px. Таким образом, имеет значение только высота содержимого вновь созданной div-оболочки внутри каждого элемента td.

Слайд медленно включается Если вы сделаете это еще медленнее, вы можете заметить некоторый сбой. Небольшой прыжок в начале. Это из-за упомянутой настройки 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. Исчезают все тд и тд,
  3. Скользящий корпус

Пример слайда:

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

По сути, сделайте «невидимую» строку высотой 0px с div внутри.
Используйте анимацию в div (не в строке), а затем установите высоту строки в 1px.

Чтобы снова скрыть строку, используйте противоположную анимацию на элементе div и установите высоту строки обратно в 0px.


1

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

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

в

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

который находит только непосредственные tds, а не вложенные. Надеюсь, что это помогает кому-то использовать плагин и иметь вложенные таблицы.


1

Я хотел бы добавить комментарий к сообщению # Vinny, но у меня нет представителя, поэтому нужно публиковать ответ ...

Обнаружена ошибка в вашем плагине - когда вы просто передаете объект с аргументами, они перезаписываются, если другие аргументы не передаются. Легко решаются путем изменения порядка обработки аргументов, код приведен ниже. Я также добавил опцию для уничтожения строки после закрытия (только потому, что мне это было нужно!): $ ('# 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's в строке, чтобы не отображать ни одного, в то время как вы начинаете анимировать высоту в строке

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

});


Это показывает & скрывает div, содержащий таблицу. Не строка таблицы, как спросил ОП.
Shazbot

0

Плагин, предложенный Винни, очень близок, но я нашел и исправил пару небольших проблем.

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

@circuitry, у тебя было что-то конкретное, или твоей критики достаточно?
OregonJeff

@ Oregoneff Просто быть честным. Я ищу что-то попроще. Для скольжения строки таблицы не требуется 109 строк кода.
схема

@circuitry, это не становится проще, если вы хотите иметь возможность использовать в качестве плагина (а не просто участвовать в плохой практике специфичного для использования кода) с возможностью контролировать скорость, упрощение и иметь обратные вызовы на настраиваемом основа. Поскольку это то, что вы бы включили в свою библиотеку кода, и его можно использовать для любой реализации, для которой требуется развернуть / свернуть строки таблицы, я не уверен, почему важно, чтобы это было 109 строк кода.
OregonJeff

0

Быстро / легко исправить:

Используйте JQuery .toggle () чтобы показать / скрыть строки по щелчку строки или привязки.

Необходимо будет написать функцию, чтобы идентифицировать строки, которые вы хотели бы скрыть, но переключение создает функциональность, которую вы ищете.


Я думаю, что это было предложено в этом ответе уже ...
DarkCygnus
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.