jquery - 表格行中的滑动切换

Question

slideToggle 与表格一起使用吗？

我想滑动切换表格的一行。但它只是出现没有任何效果。

Answer 1

SlideToggle 确实适用于表格行，它有点糟糕。

如果您有一个高度大于最小值的表格行 - 像这样

<tr height="30%">

然后slidetoggle会平滑地向下滑动，直到达到它的最小高度......然后它会像你使用的那样立即消失

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

我在http://jsfiddle.net/BU28E/1/上做了一个 jsfiddle 来演示这个

对您来说更好的解决方案可能是使用由 div 制成的表格。Divs 会非常顺利地向上滑动。我在http://jsfiddle.net/BU28E/2/制作了另一个 jsfiddle 演示了这一点

Answer 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 并在需要时同时滑动切换它们。

Answer 3

我不知道这种解决方法是否被认为是有效的方式，但它对我有用：

假设您要滑动表格的第一行（此代码将滑动标题）：

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

所以，基本上，你想向上滑动 Row 孩子而不是行本身:)

Answer 4

尝试使用

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

为了类似的效果

Answer 5

您可以通过设置tr要滑动到的 来做到这一点，display:none;然后在其中tr添加一个等于您的表格具有的列的数量，td其中也设置为在 that 中。colspandivdisplay:nonetd

您想要在滑动行中的所有内容都进入上述的div，从而产生tr带有动画的幻灯片。

下面的代码片段显示了这一点。

$(".accordion-row").on("click",
  function() {
    var accordionRow = $(this).next(".accordion");
    if (!accordionRow.is(":visible")) {
      accordionRow.show().find(".accordion-content").slideDown();
    } else {
      accordionRow.find(".accordion-content").slideUp(function() {
        if (!$(this).is(':visible')) {
          accordionRow.hide();
        }
      });
    }
  });

.accordion-row {
  cursor: pointer;
}

.accordion {
  display: none;
  width: 100%;
}

.accordion-content {
  display: none;
}


/* Only used to remove undeeded padding added by bootstrap */
table.table.table-hover>tbody>tr>td {
  padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>
        th1
      </th>
      <th>
        th2
      </th>
      <th>
        th3
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="accordion-row">
      <td>
        tr1 td1
      </td>
      <td>
        tr1 td2
      </td>
      <td>
        tr1 td3
      </td>
    </tr>
    <tr class="accordion">
      <td colspan="3">
        <div class="accordion-content">
          tr1 accordion-content
        </div>
      </td>
    </tr>
    <tr class="accordion-row">
      <td>
        tr2 td1
      </td>
      <td>
        tr2 td2
      </td>
      <td>
        tr2 td3
      </td>
    </tr>
    <tr class=" accordion">
      <td colspan="3">
        <div class="accordion-content">
          tr2 accordion-content
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 6

我想出了一些解决方法来解决无法滑动表格行的问题。仅当您的表格内容完全是文本时，此代码才有效。这可以通过一些工作进行调整以支持其他事物（图像等）。这个想法是该行只会缩小，直到它达到其内容的大小。因此，如果您可以在需要时缩小内容，幻灯片将继续播放。

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可能需要根据您的边界（以及可能的其他因素）进行调整。此外，这仅演示隐藏内容。需要一种类似的方法来允许字体大小随着行向下滑动而增长。这更像是一个概念证明。

Answer 7

编辑：在尝试了 Jonatan 的回答之后，他的方法看起来更干净了。

在这里，我有一个带有类的表格行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。

这不会像滑动切换那样很好地拉伸行，但效果对我的目的有效。

如果您真的想压缩行高，您可以自己制作动画，方法是用缩小高度直到达到 0 的param.hide()a替换。setTimeout

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

它看起来像这样：

Answer 8

您可以滑动切换表格中的一行。请试试这个

表格的 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>

单击“a”href 时，jQuery 代码在这里，表格将被切换。

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

对于特定的索引行，您可以使用$('table tr:eq(rowindex) td').