我有一个很长的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的显示/隐藏功能来最小化表格,但仍然显示顶部和底部的部分行。中间的行应替换为"Show Full Table“之类的文本,单击时将展开以从头到尾显示完整的表格。
在jQuery中实现这一点的最佳方法是什么?
顺便说一句,我已经尝试添加一个类"Table_Middle“到一些行,但它并没有完全隐藏它,它占用的空间仍然在那里,我没有文本来给用户一个完全展开表的方法。
受发布的答案启发,HTML EDIT添加了工作示例
下面的示例是一个完整的工作示例,您甚至不需要下载。只需粘贴到一个空白的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>
编辑链接我的blog post和工作示例。
发布于 2008-10-18 16:33:00
像这样的东西可能会起作用:
<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();
});
发布于 2008-10-18 16:27:43
最简单的方法是添加一个<tbody>
来对行进行分组,并在none
和table-row-group
之间切换(对于IE,捕获异常并将其设置为block
)。不确定是否特定于jquery,但这是“正常”的做法。
发布于 2008-10-20 01:39:35
这里有一个解决方案,它不需要任何额外的标记,并且它可以很好地降级。
<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()
;
})
)
;
}
https://stackoverflow.com/questions/215219
复制相似问题