Javascript 如何使用 jQuery 隐藏/显示表格行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1934698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide/show table rows using jQuery?
提问by Andrew
I have a Zend Framework (PHP) web application that has a table with a lot of rows.
我有一个 Zend Framework (PHP) Web 应用程序，它有一个包含很多行的表。
- 99.9% of the time, the user will take action on the first or second row.
- 00.1% of the time, the user will need to go back and take action on a different row.
- 99.9% 的情况下，用户会在第一行或第二行采取行动。
- 00.1% 的情况下，用户需要返回并在不同的行上执行操作。
So I only really need to display the first few rows on page load, and keep the rest available for the sake of history.
所以我真的只需要在页面加载时显示前几行，为了历史起见，保留其余的行。
I would like to shorten the table somehow. I'm thinking, using jQuery, maybe do something where the first 5 rows are displayed (the rest are hidden), and at the bottom of the table, there is a link to display 5 more rows.
我想以某种方式缩短表格。我在想，使用 jQuery，也许可以做一些显示前 5 行的事情（其余的行是隐藏的），并且在表格的底部，有一个链接可以显示另外 5 行。
alt text http://img64.imageshack.us/img64/2479/5rowtable.png
替代文字 http://img64.imageshack.us/img64/2479/5rowtable.png
What do you think? How could I achieve this with jQuery?
你怎么认为？我怎么能用 jQuery 实现这一点？
回答by Mottie
This is how I would do this (demo here):
这就是我将如何执行此操作（此处为演示）：
Script
脚本
var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
var $table = $('table').find('tbody'); // tbody containing all the rows
var numRows = $table.find('tr').length; // Total # rows
$(function () {
// Hide rows and add clickable div
$table.find('tr:gt(' + (numShown - 1) + ')').hide().end()
.after('<tbody id="more"><tr><td colspan="' +
$table.find('tr:first td').length + '"><div>Show <span>' +
numMore + '</span> More</div</tbody></td></tr>');
$('#more').click(function() {
numShown = numShown + numMore;
// no more "show more" if done
if (numShown >= numRows) {
$('#more').remove();
}
// change rows remaining if less than increment
if (numRows - numShown < numMore) {
$('#more span').html(numRows - numShown);
}
$table.find('tr:lt(' + numShown + ')').show();
});
});
回答by Andrew
I know this is an old thread, but just in case anyone else is searching I wrote this script:
我知道这是一个旧线程，但以防万一其他人正在搜索我写了这个脚本：
$(function() {
/* initial variables */
var numRows = $('#ticketLinesTable').find('tr').length;
var SHOWN = 5;
var MORE = 20;
/* get how many more can be shown */
var getNumMore = function(ns) {
var more = MORE;
var leftOver = numRows - ns;
if((leftOver) < more) {
more = leftOver;
}
return more;
}
/* how many are shown */
var getInitialNumShown = function() {
var shown = SHOWN;
if(numRows < shown) {
shown = numRows;
}
return shown;
}
/* set how many are initially shown */
var numShown = getInitialNumShown();
/* set the numMore if less than 20 */
var numMore = getNumMore(numShown);
/* set more html */
if(numMore > 0) {
var more_html = '<p><button id="more">Show <span style="font-weight: bold;">' + numMore + '</span> More...</button></p>';
$('#ticketLinesTable').find('tr:gt(' + (numShown - 1) + ')').hide().end().after(more_html);
}
$('#more').click(function(){
/* determine how much more we should update */
numMore = getNumMore(numShown);
/* update num shown */
numShown = numShown + numMore;
$('#ticketLinesTable').find('tr:lt('+numShown+')').show();
/* determine if to show more and how much left over */
numMore = getNumMore(numShown);
if(numMore > 0) {
$('#more span').html(numMore);
}
else {
$('#more').remove();
}
});
});
回答by cletus
Sure you could do this with jQuery. I would probably do it this way:
当然你可以用 jQuery 做到这一点。我可能会这样做：
<table>
<tbody id="new">
<tr>...</tr> <!-- x5 -->
<tr><td><a href="#" id="toggle">Show Old</a></td></tr>
</tbody>
<tbody id="old">
...
</tbody>
</table>
Load them hidden with CSS:
加载它们隐藏的 CSS：
#old { display: none; }
and:
和：
$(function() {
$("#toggle").click(function() {
if ($("#old").is(":hidden")) {
$(this).text("Hide Old");
} else {
$(this).text("Show Old");
}
$("#old").slideToggle();
return false;
});
});
The jQuery hide/show effects can be a bit strange with table components however. If so change the CSS to this:
然而，jQuery 隐藏/显示效果对于表格组件可能有点奇怪。如果是这样，请将 CSS 更改为：
#old.hidden { display: none; }
and:
和：
$(function() {
$("toggle").click(function() {
if ($("#old").hasClass("hidden")) {
$(this).text("Hide Old");
} else {
$(this).text("Show Old");
}
$(this).toggleClass("hidden");
return false;
});
});
Of course you don't get the nice effects this way.
当然，您不会以这种方式获得好的效果。
