Скрыть заголовок таблицы без поиска, используя HTML / CSS / JavaScript

Question

Я пытаюсь создать таблицу с заголовком, который полностью скрыт без какого-либо ввода.У меня есть следующий код, но заголовок все еще виден.Я перепробовал множество вариантов, но не могу скрыть заголовок, когда ввод для поиска пуст.

Подробности: Я не могу использовать jQuery .

Добавить: Я искал и пытался в течение 3 дней (у меня нет образования по этому вопросу).Я прочитал много постов и сайтов.Дело в том, что я должен добавить его в макрос HTML.Странно то, что, например, var tr = getElementsByTagName("tr"); нельзя заменить на var tr = table.rows.Когда я ввожу это в функцию, он не рендерит то, что обычно делает.Возможно, я уже нашел ответ, но это чисто макрос, вызывающий проблему.

Следующий код работает, но отображает заголовок:

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 = "";
  }
    }
}

б) 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;
}

Answer 1

определить класс в 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>