slideToggle可以用于表格吗？
我想对一个表格的行使用slideToggle，但是它没有任何效果，只是直接显示出来了。
9个回答
38
SlideToggle可以用于表格行，但有点麻烦。
如果你的表格行高度大于最小高度，像这样：
<tr height="30%">
然后 slidetoggle 会平滑地向下滑动，直到达到其最小高度......然后它会立即消失，就像你使用了
$("#tr").hide();
我已经在 http://jsfiddle.net/BU28E/1/ 上创建了一个 jsfiddle 来演示这个问题。
对你来说更好的解决方法可能是使用由 div 组成的表格。 div 将非常平滑地向上滑动。 我创建了另一个 jsfiddle 来演示这个解决方案，网址为http://jsfiddle.net/BU28E/2/
- jwegner
2
谢谢您的解释，那么 tr 在滑动效果方面存在一些问题。我该如何解决呢？我无法获取 tr 的高度，因为它的高度是由其内容定义的。 - hd.
1好的。我不知道如何使<tr>下滑。至少在Chrome浏览器中，它们的高度不会低于最小内容显示高度。我的解决方案是使用<div>标签。我在上面发布了一个jsfiddle示例，但这里是链接：http：//jsfiddle.net/BU28E/2/。 - jwegner
17
我的做法是在行中放置一个单独的DIV，并将TR和TD的padding设置为零。然后我可以切换滑动DIV而不是行：
<table>
<tr style="padding: 0">
<td style="padding: 0">
<div id="slideme" style="display: none">
</td>
</tr>
</table>
$("#slideme").slideToggle();
很棒。如果需要的话，我认为你可以在每列中放置一个DIV，并同时滑动它们。
- Jonatan
2
这个几乎可以工作，除了行和/或单元格为div保留空间，因此保留的空间会突然出现，而div则滑入其中，而不是表格变大。 - Dave Cousineau
是的，我不会说这个很好用，因为空间已经被保留了，即使你将行高设置为0，幻灯片动画仍然会卡顿。 - Vincent
5
我不知道这种解决方法是否被认为是一种有效的方式，但它对我来说起作用了：
假设你想slideUp一个表格的第一行（这段代码将slideUp标题）：
$('table tr').first().children().slideUp();
所以，基本上，您想将行子项向上滑动而不是整个行本身 :)
- Mawaheb
5
尝试使用
$("#tr").fadeToggle(1000)
实现类似效果的方法
- Robert Benyi
3
您可以通过将要滑动的设置为
display:none;，然后在该中添加一个，其colspan等于您的表格具有的列数，并且该中还设置了一个div，其也被设置为display:none 来实现此操作。
您想要滑动的行中的所有内容都放入上述提到的
中，从而得到一个带有动画效果的。
下面的代码片段展示了这一过程。
$(".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>- Callum
2
我想到了一个解决无法滑动表格行的问题的方法。如果您的表格内容完全是文本，则此代码有效。可以通过一些工作来调整以支持其他内容（图片等）。这个想法是行只会缩小到它的内容大小，因此，如果需要时可以收缩内容，滑动将继续进行。
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可能需要根据您的边框（以及可能的其他因素）进行调整。此外，这仅演示了隐藏内容的方法。如果要实现字体大小随着行向下滑动而增大，需要采用类似的方法。这更像是一个概念证明。- James Montagne
0
嗨，这将会运行得很顺畅。
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");
}
- user14966801
0
编辑：尝试了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中的增量来调整速度。
这不像滑动开关一样漂亮地拉伸行，但该效果对我的目的起作用。
如果你真的想要压缩行高度，你可以用 setTimeout 替换 param.hide()，以使高度缩小到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;
});
}
});
它看起来像这样：
- user1274820
-3
您可以滑动切换表格中的行。请尝试一下。
表格的 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')。
- Deepak
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接