js实现表格数据搜索


Posted in Javascript onAugust 09, 2020

本文实例为大家分享了js实现表格数据搜索的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>表格数据搜索</title>
 <link href="../css/表格数据搜索.css" rel="stylesheet">
</head>
<body>
<input type="text" placeholder="搜索..." id="myInput" onkeyup="myFunction()">
<table id="myTable">
 <tr>
  <th>名称</th>
  <th>城市</th>
 </tr>
 <tr>
  <td>Alfreds Futterkiste</td>
  <td>Germany</td>
 </tr>
 <tr>
  <td>Berglunds snabbkop</td>
  <td>Sweden</td>
 </tr>
 <tr>
  <td>Island Trading</td>
  <td>UK</td>
 </tr>
 <tr>
  <td>Koniglich Essen</td>
  <td>Germany</td>
 </tr>
</table>
<script src="../js/表格数据搜索.js">
</script>
</body>
</html>

CSS:

#myInput{
 background: url('https://static.runoob.com/images/mix/searchicon.png')no-repeat;
 background-position: 10px 12px;
 width:100%;
 padding: 12px 20px 12px 40px;
 border:1px solid #ddd;
 font-size: 16px;
 margin-bottom: 12px;
 border-radius: 6px;
}
#myTable {
 width: 100%;
 border: 1px solid #ddd;
 font-size: 18px;
 border-collapse:collapse;
}
#myTable th,td{
 text-align: left;
 padding:15px 12px;
}
#myTable tr{
 /* 表格添加边框 */
 border-bottom:1px solid #ddd;
}
#myTable tr:hover{
 background-color: #f1f1f1;
}
#myTable th{
 background-color: #f1f1f1;
}

JS:

function myFunction() {
 var myInput=document.getElementById("myInput");
 var filter=myInput.value.toUpperCase();
 var table=document.getElementById("myTable");
 var tr=table.getElementsByTagName("tr");
 //循环列表每一项,查找匹配项
 for(var i=0;i<tr.length;i++) {
  var td = tr[i].getElementsByTagName("td")[0];
  if (td){
   if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
    tr[i].style.display = "";
   } else {
    tr[i].style.display = "none";
   }
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初学Javascript的一些总结
Nov 03 Javascript
JavaScript 的继承
Oct 01 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
js实现微信聊天界面
Aug 09 #Javascript
js实现微信聊天效果
Aug 09 #Javascript
js实现盒子滚动动画效果
Aug 09 #Javascript
js仿京东放大镜效果
Aug 09 #Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 #Javascript
js实现带有动画的返回顶部
Aug 09 #Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 #Javascript
You might like
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
vue实现循环切换动画
2018/10/17 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python异常处理总结
2014/08/15 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
django使用html模板减少代码代码解析
2017/12/12 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
校园十大歌手策划书
2014/02/01 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
校园安全标语
2014/06/07 职场文书
消防安全标语
2014/06/07 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
售后服务承诺函格式
2015/01/21 职场文书
商务司机岗位职责
2015/04/10 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书