美文网首页
如何用js做出一个表格检索

如何用js做出一个表格检索

作者: 彭于晏的老婆呀 | 来源:发表于2018-08-02 20:36 被阅读0次

今天给大家介绍一个,如何用js做出表格检索。
我们的检索一般分为几大类,有:
字符串比较、不区分大小写、模糊搜索(search)以及多关键词搜索(split)
1.简单的字符串比较:
我们只需要获取表格中的信息和文本框的内容作比较,若相等即显示出来。
2.不区分大小写
我们需要把我们要检索的内容和表格中的信息进行小写化操作,即toLowerCase(),再将其比较。
3.模糊搜索
模糊搜索需要用到search()操作,即我们不需要把内容全都输入进去,只需要输入内容中的某一个字或者字母,即可将我们需要的内容在表格中查找出来。
4.多关键词搜索
我们可以同时输入不同内容,然后用空格隔开,通过split(‘ ’)将其转换成字符串,再通过search将其一一搜索出来。
最后附上代码:
<script type="text/javascript">
window.onload=function(){
var oTa=document.getElementById('tal');
var oBtn=document.getElementById('btn')
var oName=document.getElementById('name');

            oBtn.onclick=function(){
                
                for(var i=0; i<oTa.tBodies[0].rows.length;i++){
                    
                    var aStr=oTa.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();    //不分大小写搜索
                    var aVal=oName.value.toLowerCase();
                    
                    var arr=aVal.split(' ');
                    oTa.tBodies[0].rows[i].style.background='';
                    
                    for(var j=0;j<arr.length;j++){
                        if(aStr.search(arr[j])!=-1){
                            oTa.tBodies[0].rows[i].style.background='yellow';
                        }
                    }
                }
            }
        }
    </script>

如有错误,麻烦指正。谢谢

相关文章

网友评论

      本文标题:如何用js做出一个表格检索

      本文链接:https://www.haomeiwen.com/subject/kcosvftx.html