Как скрыться/показать строки таблицы с помощью jQuery?
У меня есть Платформа Зенда (PHP) веб-приложение, которое имеет таблицу с большим количеством строк.
- 99.9% времени, пользователь примет меры на первой или второй строке.
- 00.1% времени, пользователь должен будет возвратиться и принять меры на другой строке.
Таким образом, я только действительно должен отобразить первые несколько строк на загрузке страницы и сохранить остальных доступными ради истории.
Я хотел бы сократить таблицу так или иначе. Я думаю, с помощью jQuery, возможно, сделайте что-то, где первые 5 строк отображены (остальные скрыты), и у основания таблицы, существует ссылка для отображения еще 5 строк.
сопроводительный текст http://img64.imageshack.us/img64/2479/5rowtable.png
Что Вы думаете? Как я мог достигнуть этого с jQuery?
2 ответа
Вот как я бы сделал это ( демонстрация здесь ):
Скрипт
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();
});
});
Конечно, вы могли бы сделать это с помощью 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>
Загрузите их скрытыми с помощью CSS:
#old { display: none; }
и:
$(function() {
$("#toggle").click(function() {
if ($("#old").is(":hidden")) {
$(this).text("Hide Old");
} else {
$(this).text("Show Old");
}
$("#old").slideToggle();
return false;
});
});
Однако эффекты скрытия / показа jQuery могут быть немного странными с компонентами таблиц. В таком случае измените CSS на этот:
#old.hidden { display: none; }
и:
$(function() {
$("toggle").click(function() {
if ($("#old").hasClass("hidden")) {
$(this).text("Hide Old");
} else {
$(this).text("Show Old");
}
$(this).toggleClass("hidden");
return false;
});
});
Конечно, вы не получите хороших эффектов таким образом.