javascript - 使用 JavaScript 过滤表格时,可展开行不会折叠
问题描述
该表有一个可展开的行,显示行的详细信息。我使用 JavaScript 来搜索和过滤特定的行内容。但是在使用搜索过滤器时,它会显示结果但无法展开详细信息。我使用了引导collapse
类。
可以在此处找到显示可扩展行的片段。
这是我的过滤器代码:
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>
回答工作过渡
function showText() {
elemContainer.style.opacity = 0;
}
function change() {
elemContainer.style.opacity = 1;
elem.innerHTML = text[counter];
setTimeout(showText, 2500);
counter++;
if (counter >= text.length) {
counter = 0;
// clearInterval(inst); // uncomment this if you want to stop refreshing after one cycle
}
}
解决方案
正如@swati 建议的那样,替换table.getElementsByTagName("tr")
为table.querySelectorAll("tr[data-toggle='collapse']")
解决问题。
这是工作代码:
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>
推荐阅读
- java - GWT 事件总线有哪些好处
- java - 如何将我的 YAML 文件加载到案例类中?
- css - 页面transitionioin的css转换未触发
- java - 使用 JNI 将过多的参数从 Java 传递到 C++
- jenkins - 在 Jenkins 管道中的 httprequest 插件中将 URL 作为参数传递
- java - NoClassDefFoundError 错误编码
- java - JButton 释放动作
- firebase - Geofire在一个非常大的firebase数据库android中搜索
- php - echod php后删除mysql数据
- laravel - 带有有线卡支付网关的 Laravel