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 相关文章推荐
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
javascript canvas封装动态时钟
Sep 30 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
php学习笔记之基础知识
2014/11/08 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
美国时尚女装在线:Missguided
2016/12/03 全球购物
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
高中数学教学反思
2014/01/30 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
知识竞赛主持词
2014/03/26 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
小学教师自我评价
2015/03/04 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
银行培训心得体会范文
2016/01/09 职场文书
教你部署vue项目到docker
2022/04/05 Vue.js