切換其他表格行的可見性

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決定給我看一個相關的相關問題 。 :)

看來我可以通過jQuery使用gt選擇器來僅切換大於指定行號的行，這對於我想要實現的功能應該是完美的。

抱歉，這個多余的問題（假設這對我有用，尚未嘗試過）！

Answer 6

切換可以完美地工作：

$（'＃show-link'）。toggle（function（）{

}，function（）{

}）;

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>

請注意，下面的jQuery中引用了表行中的data屬性：

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

我使用'data'屬性而不是類名，因為我想將它們分開...如果需要，可以使用類名，但不要使用ID，因為這不是正確的方法（ID應該是唯一的，不再重復）。