切换其他表格行的可见性答案

【问题标题】：Toggle visibility of additional table rows切换其他表格行的可见性
【发布时间】：2012-06-25 00:24:10
【问题描述】：

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

谢谢！

【问题讨论】：

标签： javascript jquery html css

【解决方案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) + ')'));

【讨论】：

【解决方案2】：

给你... 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>

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

【讨论】：

【解决方案3】：

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

【讨论】：

是的，我选择了同样的答案！谢谢。问题：将一个类添加到我想最初隐藏的行（除了第 0 行），然后通过 css 将它们的可见性设置为none 会不会更干净？还是按照您的建议在页面加载时使用.hide() 实际上更好？
更好的是，使用first-child 选择器，而不必在 PHP 级别添加类！谢谢先生。
嗯，第一个问题：在添加 CSS 之后，我的行都没有显示（即 first-child 选择器不起作用，这是我的假设）。关于我需要记住的任何想法？
我认为 :first-child 支持 IE7 及更高版本。因此，如果您使用的是 IE6 - 这确实可能是个问题。
让我们continue this discussion in chat

【解决方案4】：

Toggle 可以完美运行：

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

} , 函数(){

});

【讨论】：

【解决方案5】：

好的，所以在输入整个问题后，StackOverflow 决定向我展示relevant related question。 :)

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

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

我应该指定第一行是tbody 的一部分，而不是标题行，因此您的解决方案将切换我一直想要显示的行。问题不够具体是我的错！

【解决方案7】：

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

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

【讨论】：