（34）DOM应用之搜索表格中的内容（多关键字搜索）

最新推荐文章于 2017-09-23 22:56:48 发布
最新推荐文章于 2017-09-23 22:56:48 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： JavaScript案例解析
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuan6251237011/article/details/38021467
版权

基本思路：通过split()函数将用户输入的关键字分割成数组，然后采用for循环，将每个关键字都搜索一遍，显示所有符合搜索要求的即可。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
	window.οnlοad=function ()
	{
		var oTab=document.getElementById('tab1');
		var oBtn=document.getElementById('btn1');
		var oTxt=document.getElementById('name');
	
		oBtn.οnclick=function ()
		{
			
			for(var i=0;i<oTab.tBodies[0].rows.length;i++)
			{
				var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();//获取表格中name这一列单元格的内容
				var sTxt=oTxt.value.toLowerCase();//获取用户输入的内容
				
				var arr=sTxt.split(' ');//假设采用空格隔开，当然此处没用正则表达式				
				oTab.tBodies[0].rows[i].style.background='';
				
				for(var j=0;j<arr.length;j++)//循环数组，实质是每个关键字都找一遍
				{
					if(sTab.sear
了解本专栏 订阅专栏 解锁全文 超级会员免费看
无人与我共黄昏
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
（31）DOM应用之搜索表格中的内容（简单搜索）
虚心求学_一点一滴
07-21 1009
基本思路：获取相应控件的  window.onload=function () { var oTab=document.getElementById('tab1'); var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('name'); oBtn.onclick=
React-JS-Application：React是一个开放源代码的前端JavaScript库，用于构建用户界面或UI组件。 它由Facebook以及由个人开发人员和公司组成的社区维护。 React可用作单页或移动应用程序开发的基础
02-23
简介在Java中让const变在React JS，Vue JS和Angular之间有所区别箭头功能这个关键字类和对象项目文件夹结构Babel，WebPack 类组件功能组件JSX 道具状态具有方法的事件处理程序ReactDOM 双向数据绑定样式表单输入多...
DOM 搜索功能
weixin_34081595的博客
03-12 91
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> window.onload = function(){ var oTab =...
A. DOM高级 07一次搜索多个关键词
小漠007的专栏
05-27 1215
ID         姓名         操作                         1         大卡                         2         leo                         3         莫莫                         4  
DOM操作表格和样式
One And Only的博客
03-31 389
DOM操作表格1.html创建表格<!--首先定义一个表格 （需要注意的是一个表格的表头和表尾是唯一的，但是表的主体可以有多个，caption用来定义表格的标题）--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javasc
多关键字 多关键词查询方案
wuxiupeng的专栏
04-02 1430
<br />在web开发中经常遇到多关键词对对个字段查询，我一般是通过动态数组来实现的。当然多个关键词的一般是用空格或,隔开，我这几假设多个关键词用空格隔开,关键字字符串为keyStr，具体代码为：<br /> 程序代码<br /><br />'关键字的搜索<br />str="select * from tableName where id>4"<br />if srhKey<>"" then<br />keyArr=split(srhKey," ")<br />j=UBound(keyArr)<br /
表格、列表关键字搜索且高亮显示的纯JavaScript实现
m0_37899540的博客
09-23 1180
该js组件用于前端表格实现关键字搜索时的高亮匹配，效果不错，既可以用于table，也可以用于列表ul
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
XML实用大全(web开发必备手册)
12-05
12.7.4 关键字值... 346 12.8 块、内联或列表项元素... 347 12.8.1 列表项... 352 12.8.2 whitespace属性... 354 12.9 字体属性... 357 12.9.1 font-family属性... 357 12.9.2 font-style属性... 358 12.9.3 ...
Java语言基础下载
09-07
声明成员方法 34 源文件的布局 36 包的声明 36 包与目录的布局 38 内容总结 45 独立实践 46 第四章： Java语法基础 47 学习目标 47 基本语法元素 48 Java关键字 49 基本Java数据类型 50 变量声明和赋值 52 引用...
（23）使用DOM插入新元素，每次插入的新节点放在最前面
虚心求学_一点一滴
07-18 8243
<!-- DOM创建元素，①创建li，②再插入相应的父级中去， -->  window.onload=function () { var oBtn=document.getElementById('btn1'); var oU1=document.getElementById('ul1'); var oTxt=document.getElementById('txt1'
（4）鼠标移动某个区域时候显示内容，移出某个区域的时候隐藏某个内容
虚心求学_一点一滴
05-24 6790
<!-- 1、当鼠标移入input的时候，让div1显示，当鼠标移除input的时候，让div1隐藏 2、事件：简单说是代表用户的操作 3、让div1显示出来其实就是将div1的display设为block --> #div1{ width:200px; height:100px; background:#ccc; boder:1px solid; di
（20）JS实现简单的图片向左无缝滚动
虚心求学_一点一滴
05-31 6725
思路： *{margin:0;padding:0;} #div1{width: 712px;height: 108px;margin:100px auto;position: relative;background: red;overflow: hidden;} #div1 ul{position: absolute;left: 0;top: 0;} #div1 ul li{floa
（7）通过js改变文本框中的文字
虚心求学_一点一滴
05-25 3916
思路： 可以在一个文本框的旁边放置一个按钮，然后点击这个按钮的时候，
（28）表格隔行变色，并且鼠标移入高亮显示，鼠标移出显示原来的颜色
虚心求学_一点一滴
07-19 3489
基本思想：采用表格中某一行的
（16）JS实现简单的选项卡
虚心求学_一点一滴
05-26 3006
思路：
如何将表格中的内容用DOM实现增删改查
最新发布
06-07
使用DOM实现表格的增删改查，可以通过以下步骤实现： 1. 获取表格元素 首先，需要获取到包含表格的元素，例如： ``` const table = document.getElementById('myTable'); ``` 其中，`myTable` 是表格元素的 ID。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值