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

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

212 голосов
/ 22 января 2009

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

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

Вот код: 

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

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

Ответы [ 21 ]

291 голосов
/ 28 мая 2009

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

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

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

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

156 голосов
/ 05 августа 2010

Я просто обертываю 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();

 });

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, когда я взял его плагин и снял его с себя, приятель.

40 голосов
/ 09 декабря 2010

Вот плагин, который я написал для этого, он берет немного от реализации 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

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

4 голосов
/ 09 июня 2015

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

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

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

4 голосов
/ 22 января 2009

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

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

3 голосов
/ 28 февраля 2010

Я немного отстал от ответа на этот вопрос, но я нашел способ сделать это:) 

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

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

2 голосов
/ 28 марта 2012

Я справился с этим, используя элементы td в строке: 

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

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

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

2 голосов
/ 15 июля 2010

Я новичок в этом сообществе. Пожалуйста, оцените мой ответ. :)

Вы можете найти это работает отлично.

У меня есть стол (<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();});

Второй параметр (функция) является обратным вызовом.

Simple !!

2 голосов
/ 20 декабря 2017

Мне нужна таблица со скрытыми строками, которые сдвигаются и исчезают при щелчке строк. 

$('.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>
2 голосов
/ 22 марта 2017

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

$('#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>
Страница:
...