在表格行中滑动切换

Question

SlideToggle 可以与表格一起使用吗？

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

Answer 1

SlideToggle 确实可以处理表格行，但它有点糟糕。

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

<tr height="30%">

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

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

我已经做了一个jsfiddle演示了这一点http://jsfiddle.net/BU28E/1/

对您来说更好的解决方案可能是使用由 div 制成的表格。 div 会非常平滑地向上滑动。我在 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();

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

Answer 4

尝试使用

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

类似的效果

Answer 5

您可以通过设置要滑动到 display:none; 的 tr 来实现此目的，然后在该 tr 内添加一个 td 与 colspan 等于表格的列数，其中 div 也设置为 td 内的 display:none。

您想要在滑动行中显示的所有内容都将放入上述 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

编辑：尝试乔纳坦的答案后，他的方法看起来更干净。

这里我有一个带有 view-converters 类的表格行，单击该行时，将显示/隐藏带有 TCConverters 类的所有 div。

我的行如下所示：

<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 来自行设置动画，该 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;
        });
    }
});

它看起来像这样：

Answer 8

你好，这会顺利进行

 const slideTr = (".table-row");
    if ($(slideTr).css("display") == "none") {
      $(slideTr).slideDown("slow");
      $(slideTr).find("td").contents().slideDown("slow");
    } else {
      $(slideTr).find("td").contents().slideUp("slow");
      $(slideTr).slideUp("slow");
    }

Answer 9

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

表格的 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')。