javascript - 使用 HTML/CSS/JavaScript 隐藏表头而不使用 seach 输入
问题描述
我正在尝试创建一个带有标题的表,该表在没有任何输入的情况下完全隐藏。我有以下代码,但标题仍然可见。我尝试了很多很多不同的选项,但是当搜索输入为空时,我似乎无法隐藏标题。
细节:我不能使用 jQuery。
补充:我已经搜索并尝试了 3 天(我对这件事的教育为零)。我已经阅读了很多帖子和网站。问题是我必须将它添加到 HTML 宏中。奇怪的是,例如var tr = getElementsByTagName("tr");
不能被var tr = table.rows
. 当我在函数中输入它时,它不会呈现它通常呈现的内容。所以可能我确实已经找到了答案,但这纯粹是导致问题的宏。
以下代码正在运行,但会显示标题:
一)Javascript
document.addEventListener('DOMContentLoaded', function () {
if (document.getElementById("myInput").value.length > 1) {
document.getElementById("header").className= "hideHeader";
} else {
ContactsearchFX();
document.getElementById('myInput').addEventListener('input', ContactsearchFX);
}
});
function ContactsearchFX() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td"),
match = false;
for (j = 0; j < td.length; j++) {
if (filter && td[j].textContent.toUpperCase().indexOf(filter) > -1) {
match = true;
break;
}
}
if (!match) {
tr[i].style.display = "none";
} else {
tr[i].style.display = "";
}
}
}
b) HTML
<br>
<img src="www.example.com/somebanner.png" class="centered">
<br>
<input class="form-control" style="width:40%" type="search" id="myInput" placeholder="Enter keywords here...">
<table id="myTable">
<tr class="header">
<th style="width:20%;">One</th>
<th style="width:20%;">Two</th>
<th style="width:20%;">Three</th>
<th style="width:60%;">Four</th>
</tr>
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>dddd</td>
</tr>
<tr>
<td>eeee</td>
<td>ffff</td>
<td>gggg</td>
<td>hhhh</td>
</tr>
<tr>
<td>iiii</td>
<td>jjjj</td>
<td>kkkk</td>
<td>llll</td>
</tr>
</table>
三)CSS
.hideHeader {
position: fixed;
display: none;
}
.centered {
display: block;
margin-left: auto;
margin-right: auto;
width: 18%;
}
.form-control {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 200px;
width: 18%;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
#myInput{
width: 100%;
font-size: 14px;
padding: 14px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 75px;
align: center;
}
#myTable{
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 14px;
margin-top: 75px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
font-size: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
margin-top: 12px;
background-color: #f1f1f1;
font-size: 14px;
}
解决方案
在 css 中定义类:
.hideHeader {
display: none;
}
将其添加到 html 的标题中:
<tr class="header hideHeader">
然后使用 Js 删除该类并将其返回到标题中:
var table = document.getElementById("myTable");
var tableHeader = table.getElementsByClassName("header")[0];
if (input.value.length > 0) {
if (tableHeader.classList.contains("hideHeader")) {
tableHeader.classList.remove("hideHeader");
}
} else {
if (!tableHeader.classList.contains("hideHeader")) {
tableHeader.classList.add("hideHeader");
}
}
这是整个代码:
document.addEventListener('DOMContentLoaded', function() {
if (document.getElementById("myInput").value.length > 1) {
document.getElementById("header").className = "hideHeader";
} else {
ContactsearchFX();
document.getElementById('myInput').addEventListener('input', ContactsearchFX);
}
});
function ContactsearchFX() {
var input, filter, table, tr, td, i;
var input = document.getElementById("myInput");
var table = document.getElementById("myTable");
var filter = input.value.toUpperCase();
var tr = table.getElementsByTagName("tr");
var tableHeader = table.getElementsByClassName("header")[0];
if (input.value.length > 0) {
if (tableHeader.classList.contains("hideHeader")) {
tableHeader.classList.remove("hideHeader");
}
} else {
if (!tableHeader.classList.contains("hideHeader")) {
tableHeader.classList.add("hideHeader");
}
}
for (i = 1; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td"),
match = false;
for (j = 0; j < td.length; j++) {
if (filter && td[j].textContent.toUpperCase().indexOf(filter) > -1) {
match = true;
break;
}
}
if (!match) {
tr[i].style.display = "none";
} else {
tr[i].style.display = "";
}
}
}
.hideHeader {
display: none;
}
.centered {
display: block;
margin-left: auto;
margin-right: auto;
width: 18%;
}
.form-control {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 200px;
width: 18%;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
#myInput {
width: 100%;
font-size: 14px;
padding: 14px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 75px;
align: center;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 14px;
margin-top: 75px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
font-size: 12px;
}
#myTable tr.header,
#myTable tr:hover {
margin-top: 12px;
background-color: #f1f1f1;
font-size: 14px;
}
<br>
<img src="http://www.atelierdecoz.fr/img/cms/thunderbird-logo-200x200.png" class="centered">
<br>
<input class="form-control" style="width:40%" type="search" id="myInput" placeholder="Enter keywords here...">
<table id="myTable">
<tr class="header hideHeader">
<th style="width:20%;">One</th>
<th style="width:20%;">Two</th>
<th style="width:20%;">Three</th>
<th style="width:60%;">Four</th>
</tr>
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>dddd</td>
</tr>
<tr>
<td>eeee</td>
<td>ffff</td>
<td>gggg</td>
<td>hhhh</td>
</tr>
<tr>
<td>iiii</td>
<td>jjjj</td>
<td>kkkk</td>
<td>llll</td>
</tr>
</table>
推荐阅读
- c++ - 当字节在文件的偏移量 0 处写入时,是否可以保持写入时间稳定?
- c# - 将字节数组从 JavaScript 返回到 Emscripten/Unity Web Assembly
- python-3.x - 做一个简单的类支持并发
- c# - TextBlock 的 ItemSource/DataSource
- .net - MVC 和 WebApi 控制器具有不同的解析行为
- graphql - GraphQL 查询将数据从一台服务器复制到另一台服务器
- intellij-idea - IntelliJ Idea 无法运行 Kotlin 文件
- python - 无法导入已安装的 Python 模块
- html - 如何获取第一个 HTML 元素的文本
- html - 视口元标记问题?样式标签在 eBay 移动视图上不起作用