创建具有可展开/可折叠部分的 HTML 表格
我创建了一个 HTML 表格,每一行都有自己的部分,当单击该行时,该部分会展开和折叠,这要归功于一些 jQuery。我已经基本设置完毕,但有两件事:
- 折叠时(默认情况下应该发生),隐藏部分的一小部分仍然显示。当我单击它时,它会自行折叠并且不再展开,直到我重新加载页面。
- 我希望得到有关如何一次仅一行展开其隐藏部分的任何建议。因此,如果有一行已展开,并且我单击另一行,它将折叠上一页已展开的行。
我将不胜感激任何帮助!我对此还很陌生。
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("search");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
$(function() {
$("td[colspan=3]").find("p").hide();
$("table").click(function(event) {
event.stopPropagation();
var $target = $(event.target);
if ( $target.closest("td").attr("colspan") > 1 ) {
$target.slideUp();
} else {
$target.closest("tr").next().find("p").slideToggle();
}
});
});
#search {
width: 50%;
font-size: 16px;
padding: 7px;
border: 1px solid #ddd;
margin-bottom: 15px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 14px;
}
#myTable th, #myTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="javascript.js"></script>
<title>My Experimental Database</title>
</head>
<body>
<input type="text" id="search" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th>Name</th>
<th>Grade</th>
<th>School</th>
</tr>
<tr>
<td>Dave Newman</td>
<td>Freshman</td>
<td>Bolder HS</td>
</tr>
<tr>
<td colspan="3" id="info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tellus et libero convallis, posuere auctor odio ultrices. Suspendisse aliquet iaculis ligula sit amet condimentum. Nullam quis sollicitudin sem, a fermentum ex. Cras vel consequat nisl. Fusce vulputate dui sit amet lorem gravida scelerisque. Proin molestie in erat ut commodo. In ut quam lorem. Quisque eu feugiat orci. Donec nulla elit, feugiat sed pulvinar id, aliquet ac tortor. Morbi ornare consequat justo, id fermentum odio convallis consectetur. Curabitur ac neque rutrum, ultricies sapien at, fermentum nisl. Aenean in gravida nulla, quis placerat est. Nunc orci ipsum, pharetra eget ullamcorper id, venenatis ac quam. Quisque a commodo erat. Etiam et orci ullamcorper, volutpat sapien vitae, porttitor lectus.</p>
</td>
</tr>
<tr>
<td>Garret Miller</td>
<td>Senior</td>
<td>Field HS</td>
</tr>
<tr>
<td colspan="3" id="info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tellus et libero convallis, posuere auctor odio ultrices. Suspendisse aliquet iaculis ligula sit amet condimentum. Nullam quis sollicitudin sem, a fermentum ex. Cras vel consequat nisl. Fusce vulputate dui sit amet lorem gravida scelerisque. Proin molestie in erat ut commodo. In ut quam lorem. Quisque eu feugiat orci. Donec nulla elit, feugiat sed pulvinar id, aliquet ac tortor. Morbi ornare consequat justo, id fermentum odio convallis consectetur. Curabitur ac neque rutrum, ultricies sapien at, fermentum nisl. Aenean in gravida nulla, quis placerat est. Nunc orci ipsum, pharetra eget ullamcorper id, venenatis ac quam. Quisque a commodo erat. Etiam et orci ullamcorper, volutpat sapien vitae, porttitor lectus.</p>
</td>
</tr>
<tr>
<td>Diana Feldman</td>
<td>Junior</td>
<td>Field HS</td>
</tr>
<tr>
<td colspan="3" id="info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tellus et libero convallis, posuere auctor odio ultrices. Suspendisse aliquet iaculis ligula sit amet condimentum. Nullam quis sollicitudin sem, a fermentum ex. Cras vel consequat nisl. Fusce vulputate dui sit amet lorem gravida scelerisque. Proin molestie in erat ut commodo. In ut quam lorem. Quisque eu feugiat orci. Donec nulla elit, feugiat sed pulvinar id, aliquet ac tortor. Morbi ornare consequat justo, id fermentum odio convallis consectetur. Curabitur ac neque rutrum, ultricies sapien at, fermentum nisl. Aenean in gravida nulla, quis placerat est. Nunc orci ipsum, pharetra eget ullamcorper id, venenatis ac quam. Quisque a commodo erat. Etiam et orci ullamcorper, volutpat sapien vitae, porttitor lectus.</p>
</td>
</tr>
</table>
</body>
</html>
I created an HTML table, and each row has its own section that expands and collapses when clicking on that row, thanks to some jQuery. I got it mostly set up, but there are two things:
- When collapsed (which should happen by default), there's a sliver of that hidden section still showing. And when I click on it, it collapses itself and no longer expands until I reload the page.
- I would love any advice on how to make only one row expand its hidden section at a time. So if there's a row that's expanded and I go to click on another row, it'll collapse the previous row that was expanded.
I would appreciate any help! I'm still very new at this.
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("search");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
$(function() {
$("td[colspan=3]").find("p").hide();
$("table").click(function(event) {
event.stopPropagation();
var $target = $(event.target);
if ( $target.closest("td").attr("colspan") > 1 ) {
$target.slideUp();
} else {
$target.closest("tr").next().find("p").slideToggle();
}
});
});
#search {
width: 50%;
font-size: 16px;
padding: 7px;
border: 1px solid #ddd;
margin-bottom: 15px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 14px;
}
#myTable th, #myTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="javascript.js"></script>
<title>My Experimental Database</title>
</head>
<body>
<input type="text" id="search" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th>Name</th>
<th>Grade</th>
<th>School</th>
</tr>
<tr>
<td>Dave Newman</td>
<td>Freshman</td>
<td>Bolder HS</td>
</tr>
<tr>
<td colspan="3" id="info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tellus et libero convallis, posuere auctor odio ultrices. Suspendisse aliquet iaculis ligula sit amet condimentum. Nullam quis sollicitudin sem, a fermentum ex. Cras vel consequat nisl. Fusce vulputate dui sit amet lorem gravida scelerisque. Proin molestie in erat ut commodo. In ut quam lorem. Quisque eu feugiat orci. Donec nulla elit, feugiat sed pulvinar id, aliquet ac tortor. Morbi ornare consequat justo, id fermentum odio convallis consectetur. Curabitur ac neque rutrum, ultricies sapien at, fermentum nisl. Aenean in gravida nulla, quis placerat est. Nunc orci ipsum, pharetra eget ullamcorper id, venenatis ac quam. Quisque a commodo erat. Etiam et orci ullamcorper, volutpat sapien vitae, porttitor lectus.</p>
</td>
</tr>
<tr>
<td>Garret Miller</td>
<td>Senior</td>
<td>Field HS</td>
</tr>
<tr>
<td colspan="3" id="info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tellus et libero convallis, posuere auctor odio ultrices. Suspendisse aliquet iaculis ligula sit amet condimentum. Nullam quis sollicitudin sem, a fermentum ex. Cras vel consequat nisl. Fusce vulputate dui sit amet lorem gravida scelerisque. Proin molestie in erat ut commodo. In ut quam lorem. Quisque eu feugiat orci. Donec nulla elit, feugiat sed pulvinar id, aliquet ac tortor. Morbi ornare consequat justo, id fermentum odio convallis consectetur. Curabitur ac neque rutrum, ultricies sapien at, fermentum nisl. Aenean in gravida nulla, quis placerat est. Nunc orci ipsum, pharetra eget ullamcorper id, venenatis ac quam. Quisque a commodo erat. Etiam et orci ullamcorper, volutpat sapien vitae, porttitor lectus.</p>
</td>
</tr>
<tr>
<td>Diana Feldman</td>
<td>Junior</td>
<td>Field HS</td>
</tr>
<tr>
<td colspan="3" id="info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tellus et libero convallis, posuere auctor odio ultrices. Suspendisse aliquet iaculis ligula sit amet condimentum. Nullam quis sollicitudin sem, a fermentum ex. Cras vel consequat nisl. Fusce vulputate dui sit amet lorem gravida scelerisque. Proin molestie in erat ut commodo. In ut quam lorem. Quisque eu feugiat orci. Donec nulla elit, feugiat sed pulvinar id, aliquet ac tortor. Morbi ornare consequat justo, id fermentum odio convallis consectetur. Curabitur ac neque rutrum, ultricies sapien at, fermentum nisl. Aenean in gravida nulla, quis placerat est. Nunc orci ipsum, pharetra eget ullamcorper id, venenatis ac quam. Quisque a commodo erat. Etiam et orci ullamcorper, volutpat sapien vitae, porttitor lectus.</p>
</td>
</tr>
</table>
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这些行仍然可见的内容是由您在 td 单元格上定义的填充引起的。
一种解决方案是将此填充移动到
p
元素中,以便 jQuery 滑动动画也适用于该填充。为此,请添加以下 CSS:
对于第二个问题:最多只允许展开一个部分,请关闭与目标段落不同的所有段落。所以让
else
块像这样:What remains visible of those rows, is caused by the padding you have defined on
td
cells.One solution is to move this padding into the
p
elements, so that the jQuery sliding animation will also apply to that padding.For that to happen, add this CSS:
For the second question: to only allow at most one section to be expanded, close all paragraphs that are different from the targeted one. So let the
else
block be like this: