day12 JS联想搜索功能示例

示例展示

#myInput {
  background-image: url('https://static.runoob.com/images/mix/searchicon.png'); /* 添加搜索按钮 */
  background-position: 10px 12px;
  background-repeat: no-repeat;
  font-size: 16px; 
  padding: 12px 20px 12px 40px; 
  border: 1px solid #ddd; 
}
 
#myTable {
  border-collapse: collapse;
  width: 800px;
  border: 1px solid #ddd; 
  font-size: 18px;
  margin: auto;
 
}
 
#myTable th, #myTable td {
  text-align: center; 
  padding: 12px; 
}
 
#myTable tr {
  border-bottom: 1px solid #ddd;
}
 
#myTable tr.header {
  background-color: #f1f1f1;
}
#myTable tr:hover {
  background-color: #f1f1f1;
}
img{
    height: 100px;
    width: 300px;
    border-radius: 10%;
    object-fit: cover;
}

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