6

我有一个表，默认情况下我只想显示第一行，但如果用户单击“显示更多”链接，则显示额外的 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-

然后很明显，如果用户单击“显示更少”，表格将恢复为默认值（再次仅显示第一行）。

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

谢谢！

4

7 回答 7

5

不需要额外的类，不需要标题 - 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/

于 2012-06-22T16:56:46.357 回答
2

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

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

于 2012-06-22T16:52:19.703 回答
1

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) + ')'));
于 2012-06-22T16:54:53.653 回答
0

您可以通过隐藏表格并仅显示来做到这一点

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

  $('tbody').show();
})
于 2012-06-22T16:53:19.943 回答
0

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

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

对不起，多余的问题（假设这对我有用，还没有尝试过）！

于 2012-06-22T16:53:49.740 回答
0

切换将完美地工作：

$('#show-link').toggle(function(){

} ， 功能（）{

});

于 2012-06-22T16:54:25.487 回答
0

在这里你去......在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' 属性而不是类名，因为我喜欢将它们分开......如果你愿意，你可以使用类名，但不要使用 ID，因为它不是正确的方法（ID应该是唯一的，而不是重复的）。

于 2012-06-22T17:21:54.100 回答