（32）DOM应用之搜索表格中的内容（忽略大小写搜索）

最新推荐文章于 2020-08-24 12:46:34 发布
最新推荐文章于 2020-08-24 12:46:34 发布
阅读量971 收藏
点赞数 1
分类专栏： JavaScript案例解析
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xuan6251237011/article/details/38021055
版权

基本思路：使用toLowerCase()函数即可实现忽略大小写的搜索。

<!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;//获取表格中name这一列单元格的内容
				var sTxt=oTxt.value;//获取用户输入的内容
				
				if(sTab.toLowerCase()==sTxt.toLowerCase())
				{
				oTab.tBodies[0].rows[i].style.background='yellow';
				}
				else
				{
					oTab.tBodies[0].rows[i].style.background='';
				}
			}
		
		
		};
		
		
	};

 </script>
</head>

<body>
姓名：<input id="name"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
无人与我共黄昏
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
JavaScript DOM 学习第三章 内容表格
10-29
在这一章我会解释我的网站上的所有页面都在运行的内容表格的代码。他会生产这个页面的所有h3和h4的列表，然后给他们添加一个链接。
JS实现表格搜索内容
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
10-21 6784
页面有表格的时候我们都会含有搜索功能，例如： html和CSS略（源码滑倒底部），直接上JS： function myFunction() { //如果有搜索按钮，定义一个onclick即可 // 声明变量 var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); //toUpperCase()是不区分大小写
Dom,查找标签和操作标签
weixin_30701575的博客
10-08 789
Dom,查找标签和操作标签 文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。 元素查找 元素直接查找 document.getEleme...
表格忽略大小写 模糊查找 多关键字 筛选
koukou0419的博客
06-02 207
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } .active...
Angular+Ionic实现搜索的历史记录功能(浏览器记录)
weixin_44794123的博客
08-24 559
Angular+Ionic实现搜索的历史记录功能(浏览器记录) 1，html中 <!--搜索框内容 --> <div class="header-search-input"> <input type="text" id="research" placeholder="搜索商品" [(ngModel)]="inputTypes" (keyup)='getTypes($event)' (click)="onTauch()">
DOM的操作应用-制作一个可添加、删除、搜索的表格
weixin_44666498的博客
05-30 157
DOM的操作应用笔记练习文档碎片的练习insertBefore( , )的练习制作一个可添加、删除、搜索的表格重难点遇到的问题 笔记 var oTr=document.createElement(‘tr’); //创建一个tr节点 父节点.appendChild.(子节点) //在最后一个子节点后面添加新的节点 父节点.insertBefore.(A节点,B节点) //在B节点前插入A节点 父节点.removeChild(子节点) //删除子节点 ————————————————————
vue监听dom大小改变案例
10-15
主要介绍了vue监听dom大小改变案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JavaScript监听一个DOM元素大小变化
10-15
主要介绍了JavaScript监听一个DOM元素大小变化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
本篇文章，小编为大家介绍关于用JavaScript获取DOM元素位置和尺寸大小的方法，有需要的朋友可以参考一下
基于DOM的XML解析技术在构件描述中的应用
10-21
XML 是允许使用者自定义标记描述数据元素，突破了HTML 固定标记集合约束的语言， DOM 是处理XML 文档的...　可使用DOM 规范解析XML 文档的数据元素， 将提取出的内容导入到构件库中， 作为构件描述信息， 从而实现构件
js表格中的DOM操作之模糊搜索
慵懒的猫
10-14 943
功能实现：实现表格搜索功能 功能点：1、字符串转小写 toLowerCase() 2、字符串分割 split() 3、seartch():用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。 语法：stringObject.search(regexp) ，返回值为stringObject中第一个与regexp匹配的子串位置，如果没有找到可匹配的字串，则返回-1。 &lt;!DOCT...
DOM中严格区分大小写
雨林
09-18 1162
DOM中严格区分大小写。例如吧input.onblur写为input.onBlur则不会执行后面的代码
（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 6789
<!-- 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 3915
思路： 可以在一个文本框的旁边放置一个按钮，然后点击这个按钮的时候，
（28）表格隔行变色，并且鼠标移入高亮显示，鼠标移出显示原来的颜色
虚心求学_一点一滴
07-19 3489
基本思想：采用表格中某一行的
（16）JS实现简单的选项卡
虚心求学_一点一滴
05-26 3006
思路：
（10）JS之按下不同的按钮显示不同的颜色
虚心求学_一点一滴
05-25 2706
<!-- --> #div1{ width:200px; height:200px; background:red; } function setColor(color){ var oDiv=document.getElementById('div1'); oDiv.style.background=color; } /* function to
如何将表格中的内容用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、付费专栏及课程。

余额充值