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 预解析
Oct 25 Javascript
js 效率组装字符串 StringBuffer
Dec 23 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
Vue v-bind动态绑定class实例方法
Jan 15 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
PHP学习之数组值的操作
2011/04/17 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python中的函数用法入门教程
2014/09/02 Python
python之wxPython应用实例
2014/09/28 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
初中女生自我鉴定
2013/12/19 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
检讨书怎么写
2015/01/23 职场文书
实习生个人总结范文
2015/02/28 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
2015年度保密工作总结
2015/04/24 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang