表格行中的滑动切换

Question

slideToggle 是否适用于表格？

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

Answer 1

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

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

<tr height="30%">

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

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

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

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

演示了这一点

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 和colspan 等于您的表格具有的列数和div在td 中也设置为display:none。

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

下面的 sn-p 显示了这一点。

$(".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 类的表格行，单击该行时，将显示/隐藏带有 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，将高度缩小到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>

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

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

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