gpt4 book ai didi

jquery - 如何使用 jQuery 隐藏表格的中间部分?

转载 作者:技术小花猫 更新时间:2023-10-29 11:35:11 25 4
gpt4 key购买 nike

我有一个非常长的 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 的显示/隐藏功能来最小化表格,但仍显示顶部和底部行的一部分。中间行应替换为“显示完整表格”之类的文本,单击时将展开以从头到尾显示完整表格。

在 jQuery 中执行此操作的最佳方法是什么?

顺便说一句,我已经尝试在某些行中添加一个类“Table_Middle”,但它并没有完全隐藏它,它占用的空间仍然存在,而且我没有文本让用户可以完全展开表格。

[编辑] 添加了受 Parand 发布的答案启发的工作示例 HTML

下面的示例是一个完整的工作示例,您甚至不需要下载 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>

[编辑] 链接我的 blog post和工作示例。

最佳答案

像这样的东西可以工作:

<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();
});

关于jquery - 如何使用 jQuery 隐藏表格的中间部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/215219/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com