首页 > Web开发 > 详细

js动态查询表格

时间:2019-12-18 21:00:36      阅读:75      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>表格搜索</title>
  </head>
  <script>
    //实现功能,搜索显示,大小写搜索不会影响,模糊搜索 
      window.onload=function () {
        var otab = document.getElementById(theader);
        var obtn = document.getElementById(search);
        var otext = document.getElementById(keyword);
        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();//cells[2]表示搜索表格第二列
            var stext = otext.value.toLowerCase();
           // toLowerCase()将英文全部转换成小写,为了用户在输入小写的时候仍然可以将内容搜索出来
            var arr = stext.split( );
            //split的作用将某一段字符串按照指定字符进行切割
            otab.tBodies[0].rows[i].style.background = "";//确保在下一次搜索时上一次搜索不会影响这次搜索的结果
            for (var j = 0; j < arr.length; j++) 
          {
              var type=0;
              if (stab.search(arr[j]) != -1) 
              {
                   otab.tBodies[0].rows[i].style.background = yellow;
                   type=1;
                }
             if(type!=1)
             {
                    otab.tBodies[0].rows[i].style.display="none";
              }

        
            }
        }
        }
        
      } 
  </script>    
  <body>
    姓名:<input id="keyword" type="text" />
    <input id="search" type="button" value="搜索" />
    <table id="theader" width="500" border="1">
      <thead>
        <td>序号</td>
        <td>姓名</td>
        <td>学号</td>
        <td>年龄</td>
        <td>操作</td>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>丁冯超</td>
          <td>李</td>
          <td>21</td>
          <td></td>
        </tr>
        <tr>
          <td>2</td>
          <td>钟辉</td>
          <td>王</td>
          <td>20</td>
          <td></td>
        </tr>
        <tr>
          <td>3</td>
          <td>申振</td>
          <td>赵</td>
          <td>23</td>
          <td></td>
        </tr>
        <tr>
          <td>4</td>
          <td>丁元超</td>
          <td>孙</td>
          <td>21</td>
          <td></td>
        </tr>
        <tr>
          <td>5</td>
          <td>于加良</td>
          <td>前</td>
          <td>20</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

技术分享图片

 

 技术分享图片

js动态查询表格

原文:https://www.cnblogs.com/lq13035130506/p/12061699.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!