对表格内容进行筛选!

 

 

 

<!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,一经查实,立即删除!

相关文章

两个几何世界

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

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

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

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…

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.…

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

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

EUV光刻机全球出货量达57台

来源&#xff1a;内容编译自「semiwiki」&#xff0c;谢谢。IMEC是推动半导体技术前进的主要组织之一&#xff0c;日前&#xff0c;他们举办了一场线上论坛&#xff0c;谈及了对芯片现状和未来的看法。在演讲中&#xff0c;ASML总裁则对光刻的发展进行了演讲。从他的PPT中可以看…

一个计算机台式机的组装方案,既能带又便宜的电脑组装方案,华擎deskmini310组装晒单...

既能带又便宜的电脑组装方案&#xff0c;华擎deskmini310组装晒单2019-04-17 10:39:4425点赞61收藏30评论前段时间家中的台式机陆陆续续已近阳寿&#xff0c;再组装一台机器的念头就油然而生。常年浏览大妈家的我发现了一样小众但蛮出名的迷你机箱——华擎deskmini310&#xff…

FPGA的历史、现状和未来

来源&#xff1a;AI前线作者&#xff1a;Oskar Mencer 等译者&#xff1a;盖磊策划&#xff1a;陈思FPGA 自上世纪 80 年代进入市场以来&#xff0c;就与通用 CPU、ASIC 乃至 GPU 竞争共存。FPGA 的低功耗、可编程、规格适中等特性&#xff0c;使其在市场中占据一席之地。本文分…

模型性能评估-混淆矩阵简介

混淆矩阵 Positive - 正例Negative (N) - 负例 结果: 预测为正类别 预测为负类别 真实为正类别 True Positive (TP) False Negative (FN) 真实为负类别 False Positive (FP) True Negative (TN)TP - 预测 P, 实际 P, 模型预测正确FP - 预测 P, 实际 N, 模…

观点|重磅出炉!29页《业内观点:机器人行业的未来》

来源&#xff1a;硅谷浦发银行未来智能实验室的主要工作包括&#xff1a;建立AI智能系统智商评测体系&#xff0c;开展世界人工智能智商评测&#xff1b;开展互联网&#xff08;城市&#xff09;云脑研究计划&#xff0c;构建互联网&#xff08;城市&#xff09;云脑技术和企业…

出道即巅峰,掀起AI领域巨浪的GPT-3,被过誉了吗?

机器之心报道编辑&#xff1a;蛋酱、杜伟、小舟是时候重新审视这个「无所不能的」模型了&#xff01;GPT-3&#xff0c;「出道即巅峰」界的代表。2020 年 5 月&#xff0c;OpenAI 高调推出了一款具有 1750 亿参数的自回归语言模型「GPT-3」&#xff0c;在人工智能领域掀起了一阵…