Как мне спрятать середину таблицы с помощью jQuery?
https://stackoverflow.com/questions/215219
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
У меня очень длинная таблица из 3 столбцов. Я бы хотел
<table>
<tr><td>Column1</td><td>Column2</td></tr>
<tr><td>Column1</td><td>Column2</td></tr>
<tr><td>Start</td><td>Hiding</td></tr>
<tr><td>Column1</td><td>Column2</td></tr>
<tr><td>Column1</td><td>Column2</td></tr>
<tr><td>Column1</td><td>Column2</td></tr>
<tr><td>End</td><td>Hiding</td></tr>
<tr><td>Column1</td><td>Column2</td></tr>
<tr><td>Column1</td><td>Column2</td></tr>
</table>
Это результат, который я пытаюсь получить с помощью jQuery.
Column1 Column2
Column1 Column2
...Show Full Table...
Column1 Column2
Column1 Column2
Я хотел бы использовать функцию jQuery «показать / скрыть», чтобы свернуть таблицу, но при этом показать часть верхней и нижней строк. Средние строки следует заменить текстом: & Quot; Показать полную таблицу & Quot; и при щелчке развернется и отобразит полную таблицу от начала до конца.
Каков наилучший способ сделать это в jQuery?
Кстати, я уже пытался добавить класс " Table_Middle " в некоторые строки, но это не скрывает его полностью, занимаемое им пространство все еще там, и у меня нет текста, чтобы дать пользователю возможность полностью развернуть таблицу.
[EDIT] Добавлен рабочий пример HTML, вдохновленный опубликованным ответом Parand
Приведенный ниже пример является полным рабочим примером, вам даже не нужно скачивать jquery. Просто вставьте в пустой файл HTML.
Ухудшительно видеть только полную таблицу, если Javascript отключен. Если Javascript включен, он скрывает средние строки таблицы и добавляет ссылки показать / скрыть.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Example Show/Hide Middle rows of a table using jQuery</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#HiddenRowsNotice").html("<tr><td colspan='2'> <a href='#'>>> some rows hidden <<</a></td></tr>");
$("#ShowHide").html("<tr><td colspan='2'><a href='#'>show/hide middle rows</a></td></tr>");
$("#HiddenRows").hide();
$('#ShowHide,#HiddenRowsNotice').click( function() {
$('#HiddenRows').toggle();
$('#HiddenRowsNotice').toggle();
});
});
</script>
</head>
<body>
<table>
<tbody id="ShowHide"></tbody>
<tr><th>Month Name</th><th>Month</th></tr>
<tbody>
<tr><td>Jan</td><td>1</td></tr>
</tbody>
<tbody id="HiddenRowsNotice"></tbody>
<tbody id="HiddenRows">
<tr><td>Feb</td><td>2</td></tr>
<tr><td>Mar</td><td>3</td></tr>
<tr><td>Apr</td><td>4</td></tr>
</tbody>
<tbody>
<tr><td>May</td><td>5</td></tr>
</tbody>
</table>
</body>
</html>
[РЕДАКТИРОВАТЬ] Ссылка на мой сообщение в блоге и рабочий пример.
Решение
Примерно так может работать:
<table>
<tbody>
<tr><td>Column1</td><td>Column2</td></tr>
<tr><td>Column1</td><td>Column2</td></tr>
<tr class="Show_Rows"><td>Start</td><td>Hiding</td></tr>
</tbody>
<tbody class="Table_Middle" style="display:none">
<tr><td>Column1</td><td>Column2</td></tr>
<tr><td>Column1</td><td>Column2</td></tr>
<tr><td>Column1</td><td>Column2</td></tr>
</tbody>
<tbody>
<tr class="Show_Rows"><td>End</td><td>Hiding</td></tr>
<tr><td>Column1</td><td>Column2</td></tr>
<tr><td>Column1</td><td>Column2</td></tr>
</tbody>
</table>
$('#something').click( function() {
$('.Table_Middle').hide();
$('.Show_Rows').show();
});
$('.Show_Rows').click( function() {
$('.Show_Rows').hide();
$('.Table_Middle').show();
});
Другие советы
Самый простой способ - добавить <tbody> для группировки строк и переключать их между none и table-row-group (перехватывать исключения и устанавливать для него block для IE). Не уверен насчет того, чтобы сделать его специфичным для jquery, но это & Quot; normal & Quot; способ делать вещи.
Вот решение, которое не требует какой-либо дополнительной разметки, и оно хорошо ухудшается.
<table id="myTable">
<tbody>
<tr><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td></tr>
</tbody>
</table>
и jQuery ... Я тут жестко запрограммировал несколько вещей (например, идентификатор таблицы, количество отображаемых строк и т. д. Их можно поместить в атрибут class таблицы, если вы этого хотите). быть более многоразовым. (например: <table class="hidey_2">)
var showTopAndBottom = 2,
minRows = 4,
$rows = $('#myTable tr').length),
length = $rows.length
;
if (length > minRows) {
$rows
.slice(showTopAndBottom, length - showTopAndBottom)
.hide()
;
$rows
.eq(showTopAndBottom - 1)
.after(
// this colspan could be worked out by counting the cells in another row
$("<tr><td colspan=\"2\">Show</td></tr>").click(function() {
$(this)
.remove()
.nextAll()
.show()
;
})
)
;
}
Попробуйте использовать метод slice ():
$("#table tr").slice(1, 4).hide();
Если вы дадите средним тегам <tr /> значение " Table_Middle " Класс это делает это намного проще сделать. Тогда это займет всего несколько строк jQuery. Один для добавления & Quot; Показать полную таблицу & Quot; строка и еще один, чтобы добавить прослушиватель щелчка для этой строки. Обязательно измените атрибут colspan & Quot; X & Quot; значение количества столбцов в вашей таблице.
// jQuery chaining is useful here
$(".Table_Middle").hide()
.eq(0)
.before('<tr colspan="X" class="showFull">Show Full Table<tr/>');
$(".showFull").click(function() {
$(this).toggle();
$(".Table_Middle").toggle();
});
Это полезно, потому что оно хорошо деградирует и доступно во многих браузерах / устройствах. Если JavaScript отключен или CSS отключен (или любой другой сценарий, который может привести к тому, что этот код не будет поддерживаться), & Quot; show full table & Quot; строки.
Я бы, наверное, сделал это так:
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data1</td>
<td>data1</td>
</tr>
...
</tbody>
<tbody id="hidden-rows">
<tr>
<td colspan="3">
<a href="#" onclick="$('#hidden-rows').hide();$('#extra-rows').show();">
Show hidden rows
</a>
</td>
</tr>
</tbody>
<tbody id="extra-rows" style="display: none;">
<tr>
<td>data1</td>
<td>data1</td>
<td>data1</td>
</tr>
...
</tbody>
<tbody>
<tr>
<td>data1</td>
<td>data1</td>
<td>data1</td>
</tr>
...
</tbody>
</table>
Это не очень хороший метод, потому что он плохо работает.
Чтобы он хорошо работал, вам нужно сначала показать все строки, а затем скрыть их с помощью функции готовности документа jQuery, а также создать строку со ссылкой.
Кроме того, ваш метод предоставления строк, чтобы скрыть определенный класс, также должен работать. JQuery будет выглядеть примерно так:
$(document).ready(function() {
$('tr.Table_Middle').hide();
});
Вам все равно нужно создать строку со ссылкой, чтобы показать их.
