Question

我有一个表格，默认情况下我只想显示第一行，但如果用户点击“显示更多”链接，则显示额外的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()函数，但不确定它是否可以在这里应用，或者我是否需要做更多的手工操作。

谢谢！

Answer 1

没有其他课程，不需要标题 - 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/

Answer 2

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

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

Answer 3

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

Answer 4

你可以通过隐藏一张桌子来做到这一点。仅显示

$('thead').click(function(){

  $('tbody').show();
})

Answer 5

好的，所以输入完整的问题后，StackOverflow决定给我看一个relevant related question。：）

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

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

Answer 6

Toggle完美无缺：

$（ '＃显示链接'）。切换（函数（）{

} ，函数（）{

}）;

Answer 7

这里你去... 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>

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

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

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

切换其他表行的可见性

7 个答案: