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 相关文章推荐
Tips 带三角可关闭的文字提示
Oct 06 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
jsTree使用记录实例
Dec 01 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
vue通过过滤器实现数据格式化
Jul 20 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
Convert Seconds To Hours
2007/06/16 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
jQuery实现轮播图效果
2019/11/26 jQuery
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
办公自动化专业大学生职业规划书
2014/03/06 职场文书
经济管理自荐书
2014/06/09 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
2015入党个人自传范文
2015/06/26 职场文书
2015中学教学工作总结
2015/07/22 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS