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 相关文章推荐
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
JS代码编译器Monaco使用方法
Jun 11 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限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
Javascript Math对象
2009/08/13 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
简洁的十分钟Python入门教程
2015/04/03 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python实现linux下抓包并存库功能
2018/07/18 Python
Python清空文件并替换内容的实例
2018/10/22 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
python os.fork() 循环输出方法
2019/08/08 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
Java如何获得ResultSet的总行数
2016/09/03 面试题
护理专业毕业生推荐信
2013/10/31 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
实习工作表现评语
2014/12/31 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP
TypeScript 内置高级类型编程示例
2022/09/23 Javascript