Jquery 在表格行中滑动切换

slideToggle与桌子一起工作吗

---

我想在桌子上滑动切换一行。但它只是出现而没有任何效果。

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

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

---

对于特定的索引行，您可以使用

$（'table tr:eq（rowindex）td'）

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

如果您有一个高度大于其最小值的表行-如下所示

<tr height="30%">

我已经做了一个jsfiddle来演示这一点

---

对您来说，更好的解决方案可能是使用由div组成的表。潜水艇会滑得很平稳。我在

上做了另一个jsfiddle演示，我做的是在行中放置一个DIV，并将TR和TD的填充设置为零。然后我可以滑动切换div而不是行：

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

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

$（“#slideme”）.slideToggle（）；

---

效果很好。我认为您可以在每列中放置一个DIV，如果需要，可以同时滑动切换它们。

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

$（“按钮”）。单击（函数（）{
$（'#1'）。幻灯片({
持续时间：1500，
步骤：函数（）{
var$this=$（this）；
var fontSize=parseInt（$this.css（“字体大小”），10）；
//如果实际高度和css高度不同，请减小字体大小，直到它们匹配为止
而（！sameHeight（this）&&fontSize>0）{
$this.css（“字体大小”，--fontSize）；
}
}
});
});
功能相同重量（el）{
var csheight=el.style.height；
cssHeight=parseFloat（cssHeight.substring（0，cssHeight.length-2））；
var realHeight=$（el）.innerHeight（）；
return isNaN（csheight）| realHeight-csheight<2；
}

效果稍有不同，因为内容会缩小，而不是正常的幻灯片效果

---

最后一行中的

<2

可能需要根据您的边界（可能还有其他因素）进行调整。此外，这只演示了如何隐藏内容。当行向下滑动时，需要类似的方法来允许字体大小增长。这更像是一种概念证明。

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

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

---

因此，基本上，您希望向上滑动行的子项，而不是行本身：）

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

这里我有一个带有类

视图转换器的表行

，单击该表行，将显示/隐藏带有类

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>

看起来是这样的：

<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>


原件：

这里我有一个带有类
视图转换器的表行
，单击该表行时，将显示/隐藏带有类
TCConverters的所有行
：

您可以通过更改
hacky
初始值和每个
中的增量来调整速度

这并不像滑动切换那样很好地拉伸行，但效果符合我的目的

如果您确实想压缩行高度，您可以自己制作动画，将
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;
        });
    }
});

看起来是这样的：

<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>

尝试使用

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

要获得类似效果
可以通过设置要滑动到
显示：无的
tr
来实现
然后在
tr
中添加一个
td
，其中
colspan
等于表中的列数，而
div也设置为
display:none

滑动行中需要的所有内容都进入前面提到的
div
，从而生成一个带动画的
tr

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


$（“.accordion行”）。在（“单击”，
函数（）{
var accordionRow=$（this.next（“.accordion”）；
如果（！accordionRow.is（“：visible”））{
accordionRow.show（）.find（“.accordion内容”）.slideDown（）；
}否则{
accordionRow.find（“.accordion内容”）.slideUp（函数（）{
如果（！$（this）.is（':visible'））{
accordionRow.hide（）；
}
});
}
});
.accordion行{
光标：指针；
}
.手风琴{
显示：无；
宽度：100%；
}
·手风琴内容{
显示：无；
}
/*仅用于移除引导添加的非种子填充*/
表.表.表悬停>tbody>tr>td{
填充：0；
}

th1
th2
th3
tr1 td1
tr1 td2
tr1 td3
手风琴内容
tr2 td1
tr2 td2
tr2 td3
tr2手风琴内容
感谢您的解释，因此tr在幻灯片效果方面存在一些问题。我该如何解决？我不能得到任何高度。它的高度是由它的内容定义的。对。我不知道怎么滑下去。至少在chrome中，显示内容的高度不会低于最小值。我的解决办法是使用s。我在上面发布了一个jsfiddle，但这里又是一个链接：除了行和/或单元格为div保留空间外，这几乎可以正常工作，因此保留的空间弹出，div滑入
$(".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").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;
        });
    }
});

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