js实现表格数据搜索

本文实例为大家分享了js实现表格数据搜索的具体代码，供大家参考，具体内容如下

  
  
  




  

    
名称
    
城市
  
  

    
Alfreds Futterkiste
    
Germany
  
  

    
Berglunds snabbkop
    
Sweden
  
  

    
Island Trading
    
UK
  
  

    
Koniglich Essen
    
Germany
  

CSS:

#myInput{
  background: url('https://static.runoob.com/images/mix/searchicon.png')no-repeat;
  background-position: 10px 12px;
  width:100%;
  padding: 12px 20px 12px 40px;
  border:1px solid #ddd;
  font-size: 16px;
  margin-bottom: 12px;
  border-radius: 6px;
}
#myTable {
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
  border-collapse:collapse;
}
#myTable th,td{
  text-align: left;
  padding:15px 12px;
}
#myTable tr{
  /* 表格添加边框 */
  border-bottom:1px solid #ddd;
}
#myTable tr:hover{
  background-color: #f1f1f1;
}
#myTable th{
  background-color: #f1f1f1;
}

JS:

function myFunction() {
  var myInput=document.getElementById("myInput");
  var filter=myInput.value.toUpperCase();
  var table=document.getElementById("myTable");
  var tr=table.getElementsByTagName("tr");
  //循环列表每一项，查找匹配项
  for(var i=0;i -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。