javascript 展开表格行以显示更多数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18914899/
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
Expand table row to show more data
提问by Sam Williams
I have a table and what i am trying to do is have a button / link in one of the columns that once it is clicked another row appears underneath with more information in it.
我有一个表格，我想要做的是在其中一列中有一个按钮/链接，一旦单击它，另一行就会出现在下面，其中包含更多信息。
I have started to build an example, the problem i have is that both rows are currently visible and when i click on the view link both rows slide down. What i am actually trying to do is have one row visible and then when i click on view, the second row becomes visible.
我已经开始构建一个例子，我遇到的问题是两行当前都是可见的，当我点击视图链接时，两行都向下滑动。我实际上想要做的是让一行可见，然后当我单击视图时，第二行变为可见。
here is a link to my Demo : http://jsfiddle.net/leest/Jgrja/
这是我的演示的链接：http: //jsfiddle.net/leest/Jgrja/
And Here is my code
这是我的代码
HTML
HTML
<table class="">
<!-- Table heading -->
<thead>
<tr>
<th>Rendering eng.</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Eng. vers.</th>
<th>CSS grade</th>
</tr>
</thead>
<!-- // Table heading END -->
<!-- Table body -->
<tbody>
<!-- Table row -->
<tr class="gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center"><a href="#" class="show_hide" rel="#slidingDiv">View</a><br /></td>
</tr>
<div id="slidingDiv">
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</div>
</tr>
</tbody>
</table>
JavaScript Code
JavaScript 代码
$(document).ready(function(){
$('.show_hide').showHide({
speed: 1000, // speed you want the toggle to happen
easing: '',
changeText: 1, // if you dont want the button text to change, set this to 0
showText: 'View',// the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open
});
});
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
I am not sure if i am going the right way about this and so any suggestions would be appreciated.
我不确定我是否正在以正确的方式解决这个问题，因此任何建议将不胜感激。
Thanks
谢谢
回答by Moob
Don't wrap the row in a div. Try animating the actual <tr>you wish to show/hide:
http://jsfiddle.net/Jgrja/1/
不要将行包装在 div 中。尝试为<tr>您希望显示/隐藏的实际设置动画：http:
//jsfiddle.net/Jgrja/1/
