对表格内容进行筛选!

 

 

 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test js</title>
</head>
<script type="text/javascript">
function onSearch(obj){//js函数开始
setTimeout(function(){//因为是即时查询,需要用setTimeout进行延迟,让值写入到input内,再读取
var storeId = document.getElementById('store');//获取table的id标识
var rowsLength = storeId.rows.length;//表格总共有多少行
var key = obj.value;//获取输入框的值

var searchCol = 0;//要搜索的哪一列,这里是第一列,从0开始数起

for(var i=1;i<rowsLength;i++){//按表的行数进行循环,本例第一行是标题,所以i=1,从第二行开始筛选(从0数起)
var searchText = storeId.rows[i].cells[searchCol].innerHTML;//取得table行,列的值

if(searchText.match(key)){//用match函数进行筛选,如果input的值,即变量 key的值为空,返回的是ture,
storeId.rows[i].style.display='';//显示行操作,
}else{
storeId.rows[i].style.display='none';//隐藏行操作
}
}
},200);//200为延时时间
}
</script>
<body>
<div > <input name="key" type="text" id="key" οnkeydοwn="onSearch(this)" value="" /></div>
<table width="200" border="1" id="store"><!-- id与函数的getId一致 -->
<tr bgcolor="#CCCCCC">
<td>name</td>
<td> </td>
<td> </td>
</tr>
<td>good</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>better</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>best</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>bad</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>worse</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>worst</td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

 

转载于:https://www.cnblogs.com/zouyun/p/7793050.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/487311.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android 提供的方法,Android编程之创建自己的内容提供器实现方法

本文实例讲述了Android编程之创建自己的内容提供器实现方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;我们学习了如何在自己的程序中访问其他应用程序的数据。总体来说思 路还是非常简单的&#xff0c;只需要获取到该应用程序的内容 URI&#xff0c;然后借助 Con…

两个几何世界

文章来源&#xff1a;原理━━━━多年前&#xff0c;物理学家在试图弄清楚弦理论的一些细节的过程中&#xff0c;观察到了一种奇异的对应关系&#xff1a;从一种几何世界出现的数字与来自截然不同的几何世界中的极为不同的数字完全匹配。对于物理学家而言&#xff0c;这种对应…

Git 教程学习--第三篇

一、远程仓库 1.先自行注册GitHub账号。由于你本地Git仓库和GitHub仓库之间的传输是通过SSH加密的&#xff0c;所以&#xff0c;需要一点设置 第一步&#xff1a;创建SSH Key。 在用户主目录下&#xff0c;看看有没有.SSH目录&#xff0c;如果有&#xff0c;再看看这个目录下有…

android动态居中布局,Android动态添加布局的两种方式

释放双眼&#xff0c;带上耳机&#xff0c;听听看~&#xff01;前言大多数时候我们布局都是用xml来布局的&#xff0c;但有些时候也是会用到动态布局的&#xff0c;尤其是在一些大项目中&#xff0c;动态布局更是体现的淋漓尽致。所以今天我们就来学习一些动态加添布局的两种方…

看了 72 位图灵奖得主成就,才发现我对计算机一无所知

来源&#xff1a;人工智能AI技术今天是计算机科学之父、人工智能之父 艾伦麦席森图灵 诞辰 108 周年。作为“图灵意志”的传承者&#xff0c;依照惯例&#xff0c;在今日纪念这位伟人。从“图灵机”到“图灵测试”&#xff0c;从破译德军的 Enigma 到自杀之谜&#xff0c;图灵一…

android 怎么改变字体颜色,安卓系统字体颜色修改教程

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼反编辑framework-res.apk1.修改内容如下&#xff1a;打开res/values/colors.xml找到 回编辑后需要把你在apk中的改过的xml文件替换到原版apk中&#xff0c;修改了带value字样文件夹下的xml要替换apk中resources.arsc这个文件#ffc8c…

prop attr 到底哪里不一样?

好吧 首先承认错误 说好的每天进行一次只是总结 但是我没坚持住 准确的来说 我并没有每天会学到了东西 但是 我一直在持续努力着 以后应该不会每天都写 但是自己觉得有用的 或者想加强记忆的 可能会写出来 我前段时间 看书的时候 注意到prop() 但是一直没用到过 今天就探…

【深度学习】解析深度神经网络背后的数学原理

来源&#xff1a;产业智能官解析深度网络背后的数学如今&#xff0c;已有许多像 Keras, TensorFlow, PyTorch 这样高水平的专门的库和框架&#xff0c;我们就不用总担心矩阵的权重太多&#xff0c;或是对使用的激活函数求导时存储计算的规模太大这些问题了。基于这些框架&#…

unity android 分包,Unity以分包(obb)形式集成到安卓原生 我慢慢填坑

Unity以分包(obb)形式集成到安卓原生 我慢慢填坑Unity以分包(obb)形式集成到安卓原生 我慢慢填坑工作中有需要将unity项目集成到安卓原生中&#xff0c;随着工作推进需要分包去发布到google &#xff0c;那么这时候就需要在unity出包时进行分包(android project obb)。使用方法…

73岁Hinton老爷子构思下一代神经网络:属于无监督对比学习

机器之心报道编辑&#xff1a;魔王、杜伟在近期举行的第 43 届国际信息检索年会 (ACM SIGIR2020) 上&#xff0c;Geoffrey Hinton 做了主题为《The Next Generation of Neural Networks》的报告。Geoffrey Hinton 是谷歌副总裁、工程研究员&#xff0c;也是 Vector Institute 的…

面向对象引子

描述两个角色: 1 def hum(name,age,job):2 """这是代表一个人"""3 data {4 name:name,5 age:age,6 job:job7 }8 9 return data 10 11 def dog(name,type): 12 """这是代表一条旺财…

下一个十年的C位:物联网产业全景解析

来源&#xff1a;北京物联网智能技术应用协会导语&#xff1a;庄子曰&#xff1a;“天地与我并生&#xff0c;而万物与我为一”庄子将天地万物与人平等对待&#xff0c;打破了“以人类为中心”的桎梏。如果说互联网是以“人的需求”为中心构建的&#xff0c;那么物联网&#xf…

[数据挖掘]朴素贝叶斯分类

写在前面的话&#xff1a; 我现在大四&#xff0c;毕业设计是做一个基于大数据的用户画像研究分析。所以开始学习数据挖掘的相关技术。这是我学习的一个新技术领域&#xff0c;学习难度比我以往学过的所有技术都难。虽然现在在一家公司实习&#xff0c;但是工作还是挺忙的&…

网页html语言怎么看,怎样查看网页的css代码?

怎样查看网页的css代码&#xff1f;下面本篇文章给大家介绍一下。有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对大家有所帮助。怎样查看网页的css代码&#xff1f;要查看一个网站使用了什么css代码&#xff0c;可以通过在网站空白处右键&#xff0c…

【精彩文章】数学家论数学——数学的本质

来源&#xff1a;数学算法俱乐部罗巴切夫斯基任何一门数学分支&#xff0c;不管它如何抽象&#xff0c;总有一天会在现实世界中找到应用.罗巴切夫斯基(Н.И.лобачевский&#xff0c;1792&#xff5e;1856&#xff0c;俄国数学家)是非欧几何的创始人之一&#xff0c…

解决sublime3不能编辑插件default settings的问题

一、遇见问题 今天给sublime安装了View In Browser&#xff0c;想更改一下默认启动的浏览器 preferences-Package settings-View In Browser-settings defaults 发现不能更改这个配置文件 二、解决问题 1.原因 通过查找资料&#xff0c;发现 sublime3默认不允许更改插件默认得配…

HTML将canvas画布鼠标事件,HTML5 Canvas鼠标与键盘事件demo示例

演示html5 canvas鼠标事件&#xff0c;获取canvas对象上的鼠标坐标&#xff0c;演示键盘事件通过键盘控制canvas上对象移动。canvas对象支持所有的javascript的鼠标事件&#xff0c;包括鼠标点击(mouseclick), 鼠标按下(mouse down), 鼠标抬起(mouse up),鼠标移动( mouse move)…

js——正则整理

1、示例 匹配网址url function IsURL(str_url){var strRegex "^((https|http|ftp|rtsp|mms)?://)" "?(([0-9a-z_!~*().&$%-]: )?[0-9a-z_!~*().&$%-])?" //ftp的user "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.…

html控制浏览器宽度和高度,html – 设置电子邮件和浏览器的tr和td宽度和高度

我正在制作HTML电子邮件,我想在发送之前在我的浏览器中预览它们,所以我希望它们在浏览器和电子邮件客户端中看起来类似.我已经尝试了几种方法来设置行和单元格的宽度和高度&#xff1a;TESTTEST通过HTML属性或样式属性设置高度没有成功.单元格覆盖了桌子的整个高度.编辑因为它似…

天价!一款芯片从设计到流片需要45亿!3纳米芯片研发成本曝光

来源&#xff1a;EETOP综合整理自IBS、科技新报英特尔宣布7纳米制程要延后半年问世&#xff0c;使晶圆代工龙头台积电有机会受惠英特尔扩大外包生产&#xff0c;竞争对手AMD 也因英特尔7纳米延后&#xff0c;产品持续维持竞争优势&#xff0c;两家公司股价都大涨。只是英特尔7纳…