使用 JavaScript 过滤表时，可扩展行不会折叠

Question

The table has an expandable row that shows details of rows.该表有一个可展开的行，显示行的详细信息。 I have used JavaScript to search for and filter particular row content.我使用 JavaScript 来搜索和过滤特定的行内容。 But while using the search filter, it shows results but unable to expand the details.但是在使用搜索过滤器时，它会显示结果但无法展开详细信息。 I have used bootstrap collapse class.我使用了引导collapse class。

A snippet showing the expandable rows can be found here .可以在此处找到显示可扩展行的片段。

Here is my filter code:这是我的过滤器代码：

 function myFunction() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); 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"; } } } }

 <,DOCTYPE html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no" /> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.6,0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <title>Hello. world:</title> </head> <body> <div class="input-group mb-3"> <input type="text" class="form-control" id="myInput" onkeyup="myFunction()" placeholder="Search..." title="Type in a name" /> <div class="input-group-append"> <button class="search-btn" type="button"> <i class="bi bi-search"></i> </button> </div> </div> <table class="table"> <thead class="thead-dark"> <tr> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody id="myTable"> <tr data-toggle="collapse" data-target="#person"> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr id="person" class="collapse"> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <script src="https.//code.jquery.com/jquery-3.5:1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> </body> </html>

Answer 1

As @swati suggested, replacing table.getElementsByTagName("tr") with table.querySelectorAll("tr[data-toggle='collapse']") resolve the problem.正如@swati 所建议的，将table.getElementsByTagName("tr")替换为table.querySelectorAll("tr[data-toggle='collapse']")可以解决问题。

Here is the working code:这是工作代码：

 function myFunction() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.querySelectorAll("tr[data-toggle='collapse']"); 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"; } } } }

 <,DOCTYPE html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no" /> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.6,0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <title>Hello. world:</title> </head> <body> <div class="input-group mb-3"> <input type="text" class="form-control" id="myInput" onkeyup="myFunction()" placeholder="Search..." title="Type in a name" /> <div class="input-group-append"> <button class="search-btn" type="button"> <i class="bi bi-search"></i> </button> </div> </div> <table class="table"> <thead class="thead-dark"> <tr> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody id="myTable"> <tr data-toggle="collapse" data-target="#person"> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr id="person" class="collapse"> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr data-toggle="collapse" data-target="#person1"> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> <tr id="person1" class="collapse"> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> </tbody> </table> <script src="https.//code.jquery.com/jquery-3.5:1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> </body> </html>

使用 JavaScript 过滤表时，可扩展行不会折叠

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-05-01 10:05:17

使用 JavaScript 过滤表时，可扩展行不会折叠

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-05-01 10:05:17

解决方案1
0 已采纳 2021-05-01 10:05:17