У меня очень длинная таблица с тремя столбцами. Я хотел бы
<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 show/hide, чтобы свести к минимуму таблицу, но все же показать часть верхних и нижних строк. Средние строки должны быть заменены текстом, как "Показать полную таблицу", и при нажатии будет расширяться, чтобы показать полную таблицу от начала до конца.
Каков наилучший способ сделать это в jQuery?
BTW Я уже пытался добавить класс "Table_Middle" к некоторым из строк, но он не скрывает его полностью, пространство, в котором оно было занято, все еще есть, и у меня нет текста, чтобы дать пользователю способ полностью разверните таблицу.
[EDIT] Добавлен рабочий пример HTML, основанный на ответе Parand
Пример ниже - полный рабочий пример, вам даже не нужно загружать jquery. Просто вставьте в пустой HTML файл.
Это ухудшает красиво, чтобы показать только полную таблицу, если Javascript отключен. Если Javascript включен, он скрывает средние строки таблицы и добавляет ссылки show/hide.
<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>
[EDIT] Добавьте ссылку в блог и рабочий пример.