SlideToggle в строке таблицы

Ответ 1

SlideToggle работает со строками таблицы, это просто отстой.

Если у вас есть строка таблицы с высотой, большей, чем она минимальная, как это показано

<tr height="30%">

Затем slidetoggle сделает плавное скольжение вниз, пока не достигнет минимальной высоты... тогда он исчезнет сразу, как вы использовали

$("#tr").hide();

Я сделал jsfiddle, демонстрируя это на http://jsfiddle.net/BU28E/1/

Лучшим решением для вас может быть использование таблицы, сделанной из div. Divs будет скользить очень плавно. Я сделал еще один jsfiddle, демонстрирующий это на http://jsfiddle.net/BU28E/2/

Ответ 2

То, что я делаю, помещается в DIV в строке и задает отладку TR и TD до нуля. Затем я могу сдвинуть переключатель div вместо строки:

<table>
  <tr style="padding: 0">
    <td style="padding: 0">
      <div id="slideme" style="display: none">
    </td>
  </tr>
</table>

$("#slideme").slideToggle();

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

Ответ 3

Я не знаю, рассматривается ли это обходное решение и эффективный способ, но он работал у меня:

скажите, что вы хотите сдвинуть первую строку таблицы (этот код будет сдвигать заголовок):

$('table tr').first().children().slideUp();

поэтому, в основном, вы хотели бы сдвинуть дочерние элементы Row вместо самой строки:)

Ответ 4

Я придумал немного обходного пути к проблеме неспособности скользить таблицы строк. Этот код работает только в том случае, если содержимое вашей таблицы является полностью текстовым. Это может быть отрегулировано для поддержки других вещей (изображений и т.д.) С некоторой работой. Идея состоит в том, что строка будет только уменьшаться до тех пор, пока она не достигнет размера своего содержимого. Итак, если вы можете уменьшить содержимое при необходимости, слайд будет продолжаться.

http://jsfiddle.net/BU28E/622/

$("button").click(function(){
    $('#1').slideUp({
        duration: 1500,
        step: function(){
            var $this = $(this);
            var fontSize = parseInt($this.css("font-size"), 10);

            // if the real and css heights differ, decrease the font size until they match
            while(!sameHeight(this) && fontSize > 0){
                $this.css("font-size", --fontSize);
            }
        }
    });
});

function sameHeight(el){
    var cssHeight = el.style.height;
    cssHeight = parseFloat(cssHeight.substring(0,cssHeight.length-2));
    var realHeight = $(el).innerHeight();

    return isNaN(cssHeight) || realHeight - cssHeight < 2;
}

Эффект немного отличается, поскольку содержание уменьшается, в отличие от обычного эффекта скольжения.

< 2 в последней строке, возможно, потребуется скорректировать на основе ваших границ (и, возможно, других факторов). Кроме того, это только демонстрирует скрытие содержимого. Аналогичный подход необходим, чтобы размер шрифта увеличивался по мере того, как строка скользнула вниз. Это скорее доказательство концепции.

Ответ 5

Изменить: после того, как Джонатан ответил, его метод выглядит немного чище.

Здесь у меня есть строка таблицы с классом view-converters, которая при нажатии будет показывать/скрывать все div с классом TCConverters.

Мои строки выглядят так:

<tr><td><div class="TCConverters"><input type="button" value="b1"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b2"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b3"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b4"></div></td></tr>

Здесь код, который запускается при нажатии view-converters.

Я не делал ничего особенного с заполнением ячеек таблицы.

Обратите внимание, что мы скрываем строку таблицы, когда мы закончили анимацию слайда.

$(".view-converters").click(function() {
    if(!$(".TCConverters:first").is(":visible")) {
        $(".TCConverters").parent().parent().show();
    }
    $(".TCConverters").slideToggle(200,function() { 
        if(!$(this).is(":visible")) {
            $(this).parent().parent().hide();
        }
    });
});

Он выглядит следующим образом:

Оригинал:

Здесь у меня есть строка таблицы с классом view-converters, которая при нажатии будет показывать/скрывать все строки с классом TCConverters:

Вы можете отрегулировать скорость, изменив начальное значение hacky и прирост в каждом .each.

Это не растягивает строки так же хорошо, как переключатель слайдов, но эффект работал для моих целей.

Если вы действительно хотите сжать высоту строки, вы можете просто анимировать ее самостоятельно, заменив param.hide() на setTimeout, которая сжимает высоту, пока не достигнет 0.

$(".view-converters").click(function() {
    var hacky = 50;
    if($('.TCConverters:first').is(':visible')) {
        $('.TCConverters').each(function() {
            var param = $(this);
            setTimeout(function() { param.hide(); },hacky);
            hacky += 5;
        });
    }
    else {
        $($('.TCConverters').get().reverse()).each(function() {
            var param = $(this);
            setTimeout(function() { param.show(); },hacky);
            hacky += 5;
        });
    }
});

Он выглядит следующим образом:

Ответ 6

Попробуйте использовать

$("#tr").fadeToggle(1000) 

для аналогичного эффекта

Ответ 7

Вы можете перемещать переключатель строки в таблице. Пожалуйста, попробуйте это

Код HTML таблицы:

<a href="#" >ok</a>
<table id="tbl">
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
    <tr><td>6</td><td>5</td></tr>
</table>

Код jQuery находится здесь при щелчке "a" href, таблица будет переключена.

$(document).ready(function() {
    $("a").click(function() {
        $('table tr td').slideToggle("medium");
    });           
});

Для конкретной строки индекса вы можете использовать $('table tr:eq(rowindex) td').