js小实例-表格数据搜索

最新推荐文章于 2020-10-21 10:53:06 发布

星辰落海

最新推荐文章于 2020-10-21 10:53:06 发布

阅读量195

点赞数

分类专栏： js 文章标签： css html js

本文链接：https://blog.csdn.net/weixin_45596380/article/details/105951860

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格数据搜索</title>
    <link href="../css/表格数据搜索.css" 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>

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

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

星辰落海

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js小实例-表格数据搜索

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格数据搜索</title> <link href="../css/表格数据搜索.css" rel="stylesheet"></head&gt...
复制链接

扫一扫

专栏目录