JS-DOM操作应用高级(二)
搜索
字符串比较、忽略大小写----大小写转换、模糊搜索----search的使用、split、高亮显示及筛选
toLowerCase() 方法用于把字符串转换为小写
str.search('') 找到并且返回字符串出现的位置,如果没找到-1
split() 方法用于把一个字符串分割成字符串数组,下面的例子用空格切割
<script>
var str='abc 123 ert';
var arr=str.split(' ');
alert(arr);
</script>
搜索
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTab=document.getElementById('tab1');
var oTxt=document.getElementById('name');
var oBtn=document.getElementById('btn1'); oBtn.onclick=function ()
{
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
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.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
}
}
}
}
</script>
</head> <body>
姓名:<input id="name" type="text"/> <input id="btn1" type="button" value="搜索"/>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>blue</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>李六</td>
<td>27</td>
<td></td>
</tr>
</tbody>
</table>
</body>
筛选
oBtn.onclick=function ()
{
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt=oTxt.value.toLowerCase(); var arr=sTxt.split(' ');
oTab.tBodies[0].rows[i].style.display='none'; for(var j=0;j<arr.length;j++)
{
if(sTab.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.display='block';
}
}
}
}
JS-DOM操作应用高级(二)的更多相关文章
- JS DOM操作(创建、遍历、获取、操作、删除节点)
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- Node.js之操作文件系统(二)
Node.js之操作文件系统(二) 1.创建与读取目录 1.1 创建目录 在fs模块中,可以使用mkdir方法创建目录,该方法的使用方法如下: fs.mkdir(path,[mode],callbca ...
- 关于js封装框架类库之DOM操作模块(二)
上一篇基本实现了框架结构,但是与真正能用上的项目框架比较还是存在很多不足,在这又做了些加强与优化 (function ( window, undefined ) { var arr = [], pus ...
- js dom 操作
JS的DOM操作 1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...
- SVG.js 元素操作整理(二)-Transform
一.transform()获取或设置矩阵变换 var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = dr ...
- JS—DOM操作
节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...
- JS DOM操作(二) Window.docunment对象——操作样式
一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class 用在客户端 name 用在服务端 用 id 定位 -- ...
- 学习blus老师js(5)--DOM操作应用高级
一.表格应用 - 1 获取 tBodies.tHead.tFoot.rows.cells 一个表格可以有很多tbody,所以tBodies是数组: 一个表格只能有一个thead和tfoot,所以tHe ...
- js——DOM操作(二)
表格属性: tHead:表格头 tBodies:表格正文 tFoot:表格尾 rows:行 cells:列 表单操作: <form id="form1"> <in ...
- 第七节 DOM操作应用-高级
表格应用: 获取:tBodies.tHead.tFoot.rows.cells <!DOCTYPE html> <html lang="en"> <h ...
随机推荐
- ECOS-Ecstore 伪静态规则
.htaccess 文件 RewriteEngine On RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME ...
- EF Unit Of Work
BaseEntity, 所有的业务表都继承这个类,每个表的主键都是GUID, 主键名Id. public abstract class BaseEntity{ public BaseEntity() ...
- 执行 npm run update-webdriver 提示文件不能获取错误
按照angularjs官网的入门教程中输入 npm run update-webdriver 总是提示 https://chromedriver.storage.googleapis.com/2.1 ...
- CF/div2c/贪心
题目链接[http://codeforces.com/contest/749/problem/C] 题意:给出一个长度为n序列包含D和R,每一轮操作的先后顺序是1-n,规则是每一轮每个人有一次机会杀掉 ...
- redis----查询keys(模糊匹配)
keys * 返回所有的key keys h?llo 类似数据库的匹配使用 keys h*lleo 类似数据库的匹配使用 keys h[ae]llo 只能是a或e的匹配 一次设置多个keys ms ...
- js通过keyCode值判断单击键盘上某个键,然后触发指定的事件
当单击按键时触发事件 document.onkeydown = function (e) { e = e || event; if (e.keyC ...
- HIT Winter Day ACM入门
A. Arpa’s hard exam and Mehrdad’s naive cheat 题意:统计1378^n的末尾数字 即统计8^n的末尾数字 n=0时为1 其他情况为{8,4,2,6}中的一个 ...
- Unity3d之将terrain转化成mesh
Unity3d中,terrain还是比较耗的,DrawCall数也比较多,为了优化性能,可能需要将terrain转化成mesh. 现提供一工具,思路是根据terrain高度图生成mesh等,可参考: ...
- 如何让linux时间与internet时间同步(centos)
笔者在使用linux时(虚拟机),经常会发现使用一段时间后,linux时间和我的宿主机(真实机)的时间不一致,而宿主机的时间确实是internet时间,安装linux时选择的时区也是Asia/Shan ...
- Java1.5泛型指南中文版(Java1.5 Generic Tutorial)
Java1.5泛型指南中文版(Java1.5 Generic Tutorial) 英文版pdf下载链接:http://java.sun.com/j2se/1.5/pdf/generics-tutori ...