javascript 切换其他表格行的可见性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11160675/
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
Toggle visibility of additional table rows
提问by hannebaumsaway
I have a table for which I want to display only the first row by default, but display additional X number of rows if a user clicks a "show more" link (and inversely hide the X rows if the user then clicks "show less").
我有一个表格，默认情况下我只想显示第一行，但如果用户单击“显示更多”链接，则显示额外的 X 行（如果用户然后单击“显示更少”，则相反地隐藏 X 行） ）。
To exemplify, I want the default view when the page loads to be like so:
例如，我希望页面加载时的默认视图如下所示：
Top Scores
====================================
| 1 | show this row always! |
====================================
-show more-
Then, if a user clicks "show more", the table should expand with additional rows and look like this:
然后，如果用户单击“显示更多”，表格应扩展并显示更多行，如下所示：
Top Scores
====================================
| 1 | show this row always! |
| 2 | newly displayed row |
| 3 | newly displayed row |
| 4 | newly displayed row |
| 5 | newly displayed row |
====================================
-show less-
Then obviously if a user clicks "show less" the table returns to default (showing only the first row again).
然后很明显，如果用户单击“显示更少”，表格将返回默认值（再次仅显示第一行）。
I'm familiar with the .toggle()function in jQuery, but not sure if it can be applied here or if I have to do more manual work.
我熟悉.toggle()jQuery 中的功能，但不确定它是否可以在这里应用，或者我是否需要做更多的手动工作。
Thanks!
谢谢！
采纳答案by Zoltan Toth
No additional classes, no headers required - http://jsfiddle.net/wgSZs/
不需要额外的类，不需要标题 - http://jsfiddle.net/wgSZs/
$('table').find('tr:gt(0)').hide();
$("button").on("click", function() {
$('table').find('tr:gt(0)').toggle();
});
UPDATE
更新
It might be better to hide the additional rows via CSS instead of jQuery to avoid element shifting while the JS is being downloaded and applied. But still no need to add classes - it's a good idea to keep your markup as clean as possible. You can do this:
最好通过 CSS 而不是 jQuery 隐藏额外的行，以避免在下载和应用 JS 时元素移动。但是仍然不需要添加类 - 保持标记尽可能干净是个好主意。你可以这样做：
table tr { display: none }
table tr:first-child { display: block }
Here is the working example - http://jsfiddle.net/wgSZs/1/
这是工作示例 - http://jsfiddle.net/wgSZs/1/
回答by iambriansreed
http://jsfiddle.net/iambriansreed/uwfk8/
http://jsfiddle.net/iambriansreed/uwfk8/
var initial_rows_to_show = 2;
(function(_rows){
_rows.hide();
$('a.more').toggle(function(){
_rows.show(); $(this).text('less');
},function(){
_rows.hide(); $(this).text('more');
});
})($('tr:gt(' + (initial_rows_to_show - 1) + ')'));
回答by Kristian
if you mark the added rows with a class like .collapsible, then you can easily toggle their visibility in javascript.
如果您使用类标记添加的行.collapsible，那么您可以轻松地在 javascript 中切换它们的可见性。
$('.collapsible').show()or $('.collapsible').hide()or $('.collapsible').toggle()
$('.collapsible').show()或$('.collapsible').hide()或$('.collapsible').toggle()
回答by SVS
You can do this by hiding of a table & displaying only
您可以通过隐藏表格并仅显示来做到这一点
$('thead').click(function(){
$('tbody').show();
})
回答by hannebaumsaway
OK, so after typing the whole question out, StackOverflow decided to show me a relevant related question. :)
好的，所以在输入整个问题之后，StackOverflow 决定向我展示一个相关的相关问题。:)
It looks like I can use the gtselector via jQuery to toggle only rows greater than a specified row number, which should be perfect for what I want to achieve.
看起来我可以gt通过 jQuery使用选择器来仅切换大于指定行号的行，这应该非常适合我想要实现的目标。
Sorry for the redundant question (assuming this will work for me, have not yet tried it)!
抱歉这个多余的问题（假设这对我有用，还没有尝试过）！
回答by David Cheung
Toggle would work perfectly:
切换将完美地工作：
$('#show-link').toggle(function(){
$('#show-link').toggle(function(){
} , function(){
} ， 功能（）{
});
});
回答by timpng1
Here you go...working example at jsFiddle:
给你...jsFiddle的工作示例：
<table width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<th width="25%" id="expand" scope="col">Show More</th>
<th width="25%" scope="col"> </th>
<th width="25%" scope="col"> </th>
<th width="25%" id="collapse" scope="col">Show Less</th>
</tr>
<tr data-rows="togglerow" style="display:none">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr data-rows="togglerow" style="display:none">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr data-rows="togglerow" style="display:none">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr data-rows="togglerow" style="display:none">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Note that the data attribute in the table rows are referenced in the jQuery below:
请注意，表行中的数据属性在下面的 jQuery 中被引用：
<script>
$("#collapse").click(function() {
$("[data-rows='togglerow']").hide(400);
})
$("#expand").click(function() {
$("[data-rows='togglerow']").show(400);
})
</script>
I used the 'data' attribute instead of class name because I like to keep those separate...you can use a class name if you'd like, but don't use ID because it's not a proper way to do it (IDs are supposed to be unique, not repeated).
我使用了 'data' 属性而不是类名，因为我喜欢将它们分开......如果你愿意，你可以使用类名，但不要使用 ID，因为这不是一个正确的方法（IDs应该是唯一的，而不是重复的）。
