js实现表格数据搜索_JavaScript

js实现表格数据搜索

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>表格数据搜索</title>
  <link href="../css/表格数据搜索.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<input type="text" placeholder="搜索..." id="myinput" onkeyup="myfunction()">
<table id="mytable">
  <tr>
    <th>名称</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>alfreds futterkiste</td>
    <td>germany</td>
  </tr>
  <tr>
    <td>berglunds snabbkop</td>
    <td>sweden</td>
  </tr>
  <tr>
    <td>island trading</td>
    <td>uk</td>
  </tr>
  <tr>
    <td>koniglich essen</td>
    <td>germany</td>
  </tr>
</table>
<script src="../js/表格数据搜索.js">
</script>
</body>
</html>

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<tr.length;i++) {
    var td = tr[i].getelementsbytagname("td")[0];
    if (td){
      if (td.innerhtml.touppercase().indexof(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

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