js实现table中前端搜索(模糊查询)

项目中用到js前端搜索功能，根据 姓名或姓名 进行 搜索，实现方法如下，遍历table所有行中的某列，符合条件则置tr为display:'',不满足条件置tr为display:none。

代码如下：

    <html>  
    <head> 
        <title>s表格前端搜索</title>
        <meta http-equiv="Content-Type" content="text/html;charset=GBK"/>        
    </head>  
    <body>  
    <h1>js表格前端搜索</h1>
    
    <label> <input type="radio" name="sex" value="男" onclick="onSearch(this.value,2)"/>男 </label>
    <label><input type="radio" name="sex" value="女" onclick="onSearch(this.value,2)"/>女 </label>
    
        <table id="table1" border="1">  
            <thead >  
                    <tr style="cursor: pointer;">  
                        <td class="listHeadCell">编号</td>  
                        <td class="listHeadCell">姓名</td>  
                        <td class="listHeadCell">性别</td>  
                    </tr>  
            </thead>  
            <tbody id="gridtbody">  
                <tr>  
                    <td name="biaozhi">1</td>  
                    <td>名称1</td>  
                    <td>男</td> 
                </tr>     
                <tr>      
                    <td name="biaozhi">2</td>  
                    <td>名称2</td>  
                    <td>男</td> 
                </tr>     
                <tr>      
                    <td name="biaozhi">3</td>  
                    <td>名称3</td>  
                    <td>女</td> 
                </tr>     
                <tr>      
                    <td name="biaozhi">4</td>  
                    <td>名称4</td>  
                    <td>男</td> 
                </tr>  
            </tbody>  
        </table>  
        <br/>  
        
        <script type="text/javascript">  
             /**
             * js 前台搜索
             * @param searchContent 搜索的内容
             * @col 要搜索的哪一列，这里是第一列，从0开始数起  
             */
            function onSearch(searchContent,col){
                setTimeout(function(){//因为是即时查询，需要用setTimeout进行延迟，让值写入到input内，再读取  
                    var storeId = document.getElementById('table1');//获取table的id标识  
                    var rowsLength = storeId.rows.length;//表格总共有多少行  
              
                    var searchCol = col;//要搜索的哪一列，这里是第一列，从0开始数起  
              
                    for(var i=1;i<rowsLength;i++){//按表的行数进行循环，本例第一行是标题，所以i=1，从第二行开始筛选（从0数起）  
                        
                        var searchText = storeId.rows[i].cells[searchCol].innerHTML;//取得table行，列的值  
                        //alert(searchText);
                        if(searchText.match(searchContent) || searchText.toUpperCase().match(searchContent.toUpperCase())){//用match函数进行筛选，如果input的值，即变量 key的值为空，返回的是ture，  
                            storeId.rows[i].style.display='';//显示行操作，  
                        }else{  
                            storeId.rows[i].style.display='none';//隐藏行操作  
                        }  
                    }  
                },20);//20为延时时间  
            }   
        </script>  
    </body>  
    </html>

效果图：

 

限时领取免费Java相关资料，涵盖了Java、Redis、MongoDB、MySQL、Zookeeper、Spring Cloud、Dubbo/Kafka、Hadoop、Hbase、Flink等高并发分布式、大数据、机器学习等技术。

资料传送门：https://mp.weixin.qq.com/s/u2b_NVNuMuAPE0w4lc45fw

 

关注下方公众号即可免费领取：

Java碎碎念公众号

posted @ 2015-08-05 15:35  Java碎碎念  阅读(9804)  评论(0)  编辑  收藏  举报