使用 HTML/CSS/JavaScript 在没有搜索输入的情况下隐藏表头

debugcn 发表于 Dev

对于 LS

我正在尝试创建一个带有标题的表格，该表格在没有任何输入的情况下完全隐藏。我有以下代码，但标题仍然可见。我尝试了很多很多不同的选项，但是当搜索输入为空时，我似乎无法隐藏标题。

详细信息：我不能使用 jQuery。

补充：我已经搜索并尝试了 3 天（我对这件事的教育为零）。我已经阅读了很多帖子和网站。问题是我必须将它添加到 HTML 宏中。奇怪的是，例如var tr = getElementsByTagName("tr");不能由var tr = table.rows. 当我在函数中输入 this 时，它不会呈现它通常呈现的内容。所以可能我已经找到了答案，但这纯粹是导致问题的宏。

以下代码有效，但显示标题：

a) 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>

c) 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。