jQuery 表格行中的slideToggle
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5126704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
slideToggle in table row
提问by hd.
does slideToggle work with table?
slideToggle 是否与表格一起使用？
I want to slideToggle a row of a table. but it just appears without any effect.
我想滑动切换表格的一行。但它只是出现没有任何效果。
回答by jwegner
SlideToggle does work with table rows, it just kind of sucks.
SlideToggle 确实适用于表格行，它只是有点糟糕。
If you have a table row with a height larger than it's minimum - like this
如果您有一个高度大于最小值的表格行 - 像这样
<tr height="30%">
Then slidetoggle will do a smooth slide down until the reaches it's minimum height... then it will dissapear immediately like you used
然后slidetoggle会平滑地向下滑动，直到达到它的最小高度......然后它会像你使用的那样立即消失
$("#tr").hide();
I've made a jsfiddle demonstrating this at http://jsfiddle.net/BU28E/1/
我在http://jsfiddle.net/BU28E/1/制作了一个 jsfiddle 来演示这一点
A better solution for you may be to use a table made out of divs. Divs will slide up very smoothly. I made another jsfiddle demonstrating this at http://jsfiddle.net/BU28E/2/
对您来说更好的解决方案可能是使用由 div 组成的表格。Divs 会非常平滑地向上滑动。我在http://jsfiddle.net/BU28E/2/制作了另一个 jsfiddle 来演示这一点
回答by Jonatan
What I do is put a single DIV in the row and set padding of the TR and TD to zero. Then I can slide-toggle the div instead of the row:
我所做的是在行中放置一个 DIV，并将 TR 和 TD 的填充设置为零。然后我可以滑动切换 div 而不是行：
<table>
<tr style="padding: 0">
<td style="padding: 0">
<div id="slideme" style="display: none">
</td>
</tr>
</table>
$("#slideme").slideToggle();
Works great. I think you could put a DIV in each column and slide-toggle them simultaneously if you need that.
效果很好。我认为您可以在每列中放置一个 DIV，并在需要时同时滑动切换它们。
回答by Mawaheb
I don't know if this workaround is considred and effecient way, but it worked for me :
我不知道这种解决方法是否有效且有效，但它对我有用：
say that you want to slideUp the first row of a table (this code will slideUp the header) :
假设您要滑动表格的第一行（此代码将滑动标题）：
$('table tr').first().children().slideUp();
so, basically, you would like to slide up the Row children instead of the row itself :)
因此，基本上，您希望向上滑动 Row 子项而不是该行本身 :)
回答by Callum
You can do this by setting the tryou want to slide to display:none;then inside that tradd a tdwith colspanequaling the amount of columns your table has with a divthat also is set as display:noneinside that td.
您可以通过设置做到这一点tr，你要幻灯片display:none;，然后内部的tr添加td与colspan使用等于你的表有列的量div也被设置为display:none内部的td。
All content you want in the sliding row goes into the aforementioned div, resulting in a trthat slides with animation.
您想要在滑动行中的所有内容都进入上述div，从而产生tr带有动画的滑动。
The below snippet shows this in action.
下面的代码片段显示了这一点。
$(".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>回答by Robert Benyi
Try using
尝试使用
$("#tr").fadeToggle(1000)
for a similar effect
为了类似的效果
回答by James Montagne
I came up with a bit of a workaround to the issue of not being able to slide table rows. This code only works if your table contents are completely text. This could be adjusted to support other things (images, etc.) with some work. The idea is that the row will only shrink until it reaches the size of its content. So, if you can shrink the content when needed, the slide will continue.
对于无法滑动表格行的问题，我想出了一些解决方法。此代码仅在您的表格内容完全是文本时才有效。这可以通过一些工作进行调整以支持其他事物（图像等）。这个想法是该行只会缩小，直到达到其内容的大小。因此，如果您可以在需要时缩小内容，幻灯片将继续。
http://jsfiddle.net/BU28E/622/
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;
}
The effect is slightly different, in that the content shrinks as opposed to the normal slide effect.
效果略有不同，与正常的幻灯片效果相比，内容缩小了。
the < 2in the last line may need to be adjusted based on your borders (and possibly other factors). Also, this only demonstrates hiding the content. A similar approach would be needed to allow the font size to grow as the row slid down. This is more of a proof of concept.
在< 2最后一行可能需要根据您的边界（可能还有其他因素）进行调整。此外，这仅演示隐藏内容。需要一种类似的方法来允许字体大小随着行下滑而增长。这更像是一个概念证明。
回答by user1274820
Edit: After trying Jonatan's answer, his method looks quite a bit cleaner.
编辑：在尝试了乔纳坦的回答后，他的方法看起来更干净了。
Here I have a table row with the class view-converterswhich, when clicked, will show/hide all divs with the class TCConverters.
在这里，我有一个包含 class 的表格行view-converters，单击该行时，将显示/隐藏 class 的所有 div TCConverters。
My rows look like this:
我的行看起来像这样：
<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>
Here's the code that runs when you click view-converters.
这是单击 时运行的代码view-converters。
I didn't do anything special with the padding of the table cells.
我没有对表格单元格的填充做任何特别的处理。
Note that we hide the table row when we are done animating the slide.
请注意，当我们完成幻灯片动画时，我们隐藏了表格行。
$(".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();
}
});
});
It looks like this:
它看起来像这样：
Original:
原来的：
Here I have a table row with the class view-converterswhich, when clicked, will show/hide all rows with the class TCConverters:
在这里，我有一个包含该类的表行view-converters，单击该行时，将显示/隐藏该类的所有行TCConverters：
You can adjust the speed by changing the hackyinitial value and the increment in each .each.
您可以通过更改hacky初始值和每个 中的增量来调整速度.each。
This doesn't stretch the rows as nicely as a slide toggle, but the effect worked for my purposes.
这不会像滑动切换那样很好地拉伸行，但效果符合我的目的。
If you really want to squeeze the row height, you can likely just animate it yourself by replacing param.hide()with a setTimeoutthat shrinks the height until it reaches 0.
如果您真的想压缩行高，您可以自己设置动画，方法是将其替换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;
});
}
});
It looks like this:
它看起来像这样：
回答by Deepak
You can slide toggle of a row in the table . Please try this
您可以滑动切换表中的一行。请试试这个
The Html code of a table:
表的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>
The jQuery code is here on click of "a" href, the table will be toggled.
jQuery 代码在此处单击“a”href，表格将被切换。
$(document).ready(function() {
$("a").click(function() {
$('table tr td').slideToggle("medium");
});
});
For particular index row you can use $('table tr:eq(rowindex) td').
对于特定的索引行，您可以使用$('table tr:eq(rowindex) td').
