创建具有可展开/可折叠部分的 HTML 表

Question

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:我创建了一个 HTML 表，每一行都有自己的部分，当单击该行时，该部分会展开和折叠，这要感谢一些 jQuery。我主要设置了它，但有两件事：

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.因此，如果有一行已展开并且我 go 单击另一行，它将折叠展开的前一行。

I would appreciate any help.我将不胜感激任何帮助。 I'm still very new at this.我对此还是很陌生。

DEMO HERE在这里演示

 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>

Answer 1

What remains visible of those rows, is caused by the padding you have defined on td cells.这些行仍然可见的内容是由您在td单元格上定义的填充引起的。

One solution is to move this padding into the p elements, so that the jQuery sliding animation will also apply to that padding.一种解决方案是将此填充移动到p元素中，以便 jQuery 滑动 animation 也将应用于该填充。

For that to happen, add this CSS:为此，请添加此 CSS：

#myTable td[colspan] {
  padding-top: 0; padding-bottom: 0;
} 

#myTable td[colspan] p {
  padding-top: 12px; padding-bottom: 12px;
}

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:所以让else块是这样的：

    var $p = $target.closest("tr").next().find("p");
    $p.slideToggle();
    $("td[colspan] p").not($p).slideUp();

创建具有可展开/可折叠部分的 HTML 表

问题描述

1 个解决方案

解决方案1
0 2022-02-28 21:41:35

创建具有可展开/可折叠部分的 HTML 表

问题描述

1 个解决方案

解决方案1 0 2022-02-28 21:41:35

解决方案1
0 2022-02-28 21:41:35