专栏首页移动大前端JS示例28-表格搜索search

JS示例28-表格搜索search

一、精确查找

<!DOCTYPE >
<html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <script>
            window.onload = function() {
                var oTab = document.getElementById('tab1');
                var oTbody = oTab.tBodies[0];

                var oName = document.getElementById('name'); // 姓名
                var oSearchBtn = document.getElementById('search'); // 搜索(按钮)

                oSearchBtn.onclick = function() {
                    for(var i = 0; i < oTbody.rows.length; i++) {
                        var name = oTbody.rows[i].cells[1].innerHTML;
                        if(name == oName.value) {
                            oTbody.rows[i].style.background = 'yellow';
                        } else {
                            oTbody.rows[i].style.background = '';
                        }
                    }
                }
            }
        </script>
    </head>

    <body>
        姓名:<input type="text" name="name" id="name" value="张三" />
        <input type="button" name="search" id="search" value="搜索" />
        <div id="">搜索结果高亮显示
        </div>
        <table id="tab1" width="300" border="1">
            <thead>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Blue</td>
                    <td>27</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>张三</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>李四</td>
                    <td>28</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>王五</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>张伟</td>
                    <td>24</td>
                </tr>

            </tbody>
        </table>
    </body>

</html>

image.png

二、模糊查找

name.search(sName) != -1

                oSearchBtn.onclick = function() {
                    if(!oName.value) {
                        alert("请输入关键字")
                    }
                    // 遍历整个表
                    for(var i = 0; i < oTbody.rows.length; i++) {

                        var name = oTbody.rows[i].cells[1].innerHTML.toLowerCase();
                        var sName = oName.value.toLowerCase();

                        if(name.search(sName) != -1) { // 模糊查询
                            oTbody.rows[i].style.background = 'yellow';
                        } else {
                            oTbody.rows[i].style.background = '';
                        }
                    }
                }

image.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 面试必问:Spring 循环依赖的三种方式

    引言:循环依赖就是N个类中循环嵌套引用,如果在日常开发中我们用new 对象的方式发生这种循环依赖的话程序会在运行时一直循环调用,直至内存溢出报错。下面说一下Sp...

    Java团长
  • 开发中使用throttle和debounce

    上面的两个问题解决后能大大提升用户体验 解决它们就用到了throttle和debounce

    剑行者
  • Webkit底层原理(1)--Webkit架构和模块

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    从入门到进错门
  • WebRTC实现p2p视频通话

    random_wang
  • Webkit底层原理(5)--CSS解释器和样式布局

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    从入门到进错门
  • 前端使用ckeditor

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    菲宇
  • Webkit底层原理(4)--DOM事件机制和Shadow DOM

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    从入门到进错门
  • Webkit底层原理(3)--HTML解释器

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    从入门到进错门
  • WEB性能(7)--XMLHttpRequest

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    从入门到进错门
  • iOS 图片预览 放大缩小的实现方式

    把UIImageView放到UIScrollView中 对UIImageView添加点击事件实现

    剑行者

扫码关注云+社区

领取腾讯云代金券