# 表格查找(样式省略)

表格查找(样式省略)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格查找</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索公司...">
    <table id="myTable">
    <tr class="header">
    <th style="width:60%;">公司名称</th>
    <th style="width:40%;">国家</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>
    
</body>
<script>
    function myFunction() {
       let input = document.getElementById("myInput");
       let filter = input.value.toUpperCase();
       let table = document.getElementById("myTable");  //选中table
       let tr = table.getElementsByTagName("tr");   //选中table标签中所有的tr元素
      // 循环表格每一行，查找匹配项
     for (let i = 0; i < tr.length; i++) {
      let td = tr[i].getElementsByTagName("td")[0];    //依次获得一行中的包含公司名称的td标签
             if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        //td.innerHTML 获取所得td标签之间的内容，即公司名称
                        //toUpperCase() 将公司名称变为大写形式
                        //indexOf(filter) filter为我们所输入的搜索目标，indexof()函数是查找td.innerHTML.toUpperCase()中是否含有filter，若有返回其第一个字符的位置，否则返回-1
                        
                            tr[i].style.display = ""; //找到则显示
                            } else {
                                 tr[i].style.display = "none"; //未找到，不再显示
                             }
           }
      }
}
</script>
</html>

posted @ 2021-10-01 19:04  rlch  阅读(43)  评论(0)    收藏  举报