切换其他表格行的可见性

Toggle visibility of additional table rows

本文关键字：可见性 表格 其他      更新时间：2023-09-26

>我有一个表格，默认情况下我只想显示第一行，但如果用户单击"显示更多"链接，则显示额外的 X 行数（如果用户随后单击"显示更少"，则反向隐藏 X 行）。

例如，我希望页面加载时的默认视图如下所示：

 Top Scores
====================================
|   1 | show this row always!      |
====================================
 -show more-

然后，如果用户单击"显示更多"，则表格应展开其他行，如下所示：

 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-

然后很明显，如果用户单击"显示更少"，表格将返回默认值（再次仅显示第一行）。

我熟悉jQuery中的.toggle()函数，但不确定它是否可以在这里应用，或者我是否必须做更多的手动工作。

谢谢！

无需其他类，无需标头 - http://jsfiddle.net/wgSZs/

$('table').find('tr:gt(0)').hide();
$("button").on("click", function() {
    $('table').find('tr:gt(0)').toggle();
});

更新

最好

通过CSS而不是jQuery隐藏其他行，以避免在下载和应用JS时元素移动。但仍然不需要添加类 - 最好保持标记尽可能干净。您可以这样做：

table tr { display: none }
table tr:first-child { display: block }

这是工作示例 - http://jsfiddle.net/wgSZs/1/

如果您使用类似 .collapsible 的类标记添加的行，那么您可以轻松地在 JavaScript 中切换它们的可见性。

$('.collapsible').show()或$('.collapsible').hide()或$('.collapsible').toggle()

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) + ')'));

您可以通过隐藏表格并仅显示来执行此操作 

$('thead').click(function(){
  $('tbody').show();
})

好的，所以在输入整个问题之后，StackOverflow决定向我展示一个相关的问题。 :)

看起来我可以通过 jQuery 使用gt选择器来仅切换大于指定行号的行，这应该非常适合我想要实现的目标。

很抱歉这个多余的问题（假设这对我有用，还没有尝试过）！

切换可以完美地工作：

$（'#show-link'）.toggle（function（）{

},函数（）{

}）;

你去...jsFiddle的工作示例：

http://jsfiddle.net/ndFgF/8/

<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">&nbsp;</th>
    <th width="25%" scope="col">&nbsp;</th>
    <th width="25%" id="collapse" scope="col">Show Less</th>
  </tr>
  <tr data-rows="togglerow" style="display:none">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr data-rows="togglerow" style="display:none">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr data-rows="togglerow" style="display:none">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr data-rows="togglerow" style="display:none">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

请注意，表行中的数据属性在下面的 jQuery 中引用：

<script>
$("#collapse").click(function() {
      $("[data-rows='togglerow']").hide(400);
    })
$("#expand").click(function() {
      $("[data-rows='togglerow']").show(400);
    })
</script>

我使用了"data"属性而不是类名，因为我喜欢将它们分开......如果您愿意，可以使用类名，但不要使用 ID，因为这不是正确的方法（ID 应该是唯一的，而不是重复的）。

相关文章：