JS表格之各种搜索应用

最新推荐文章于 2024-05-03 16:01:29 发布

云之前端

最新推荐文章于 2024-05-03 16:01:29 发布

阅读量282

点赞数 1

分类专栏：学习总结文章标签：模糊搜索多关键词搜索大小写转换

本文链接：https://blog.csdn.net/qq_44586361/article/details/86771797

版权

学习总结专栏收录该内容

36 篇文章 0 订阅

订阅专栏

搜索
忽略大小写-toLowerCase实现大小写转换
模糊搜索-search的使用
多关键词-split的使用

<!	DOCTYPE html>
<html>
<head>
<title></title>
<script>
window.function()
{
     var oTab=document.getElementById('tab1');
     var oTxt=document.getElementById('txt1');
     var oBtn=document.getElementById('btn1');
    
     oBtn.onclick=function()
     {
         for(var i=0;i<oTab.tBodies[0].rows.length;i++)
         {
             var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
             var sTxt=oTxt.value.toLowerCase();   //toLowerCase()实现大小写转换
             var arr=sTxt.split(' ');    //（注：这里假设用户输入多关键字是用空格隔开的）
             oTab.tBodies[0].rows[i].style.background='';  //先使所有行无背景颜色
             for(var j=0;j<arr.length;j++)   //循环数组（注：该数组是由关键字切开而来）
             {
                  if(sTab.search(arr[j])!=-1)
                  {
                       oTab.tBodies[0].rows[i].style.background='yellow';
                   }
             }
         }
     }
 }
 </script>```
 </head>
 <body>
 姓名：<input id="txt1" type="text"/>
 <input id="btn1" type="button" value="搜索"/>
 <table id="tab1" border="1" width="400px">
 <thead>
 <tr>
   <td>工号</td>
   <td>姓名</td>
   <td>性别</td>
   <td>部门</td>
   <td>学历</td>
 </tr>
 </thead>
 <tbody>
 <tr>
   <td>A001</td>
   <td>张毅</td>
   <td>男</td>
   <td>财务</td>
   <td>本科</td>
 </tr>
  <tr>
   <td>A002</td>
   <td>张以威</td>
   <td>男</td>
   <td>人事</td>
   <td>本科</td>
 </tr>
  <tr>
   <td>A003</td>
   <td>王慧美</td>
   <td>女</td>
   <td>财务</td>
   <td>本科</td>
 </tr>
  <tr>
   <td>A004</td>
   <td>薛星美</td>
   <td>女</td>
   <td>市场</td>
   <td>大专</td>
 </tr>
 <tr>
   <td>A005</td>
   <td>Green</td>
   <td>男</td>
   <td>市场</td>
   <td>大专</td>
 </tr> 
 </tbody>
 </body>
 </html>

云之前端

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS表格之各种搜索应用

搜索忽略大小写-toLowerCase实现大小写转换模糊搜索-search的使用多关键词-split的使用&lt;! DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;script&gt;window.function(){ var oTab=document.getEleme...
复制链接

扫一扫