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

发布于 2025-01-10 13:32:13 字数 5989 浏览 0 评论 0原文

我创建了一个 HTML 表格,每一行都有自己的部分,当单击该行时,该部分会展开和折叠,这要归功于一些 jQuery。我已经基本设置完毕,但有两件事:

  1. 折叠时(默认情况下应该发生),隐藏部分的一小部分仍然显示。当我单击它时,它会自行折叠并且不再展开,直到我重新加载页面。
  2. 我希望得到有关如何一次仅一行展开其隐藏部分的任何建议。因此,如果有一行已展开,并且我单击另一行,它将折叠上一页已展开的行。

我将不胜感激任何帮助!我对此还很陌生。

此处演示

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:

  1. 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.
  2. 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.

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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

壹場煙雨 2025-01-17 13:32:13

这些行仍然可见的内容是由您在 td 单元格上定义的填充引起的。

一种解决方案是将此填充移动到 p 元素中,以便 jQuery 滑动动画也适用于该填充。

为此,请添加以下 CSS:

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

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

对于第二个问题:最多只允许展开一个部分,请关闭与目标段落不同的所有段落。所以让 else 块像这样:

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

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:

#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:

    var $p = $target.closest("tr").next().find("p");
    $p.slideToggle();
    $("td[colspan] p").not($p).slideUp();
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文