Javascript表格中搜索
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
// var str = "avdfklksd";
//alert(str.search('d'));//找到字符串出现的位置,如果没找到返回-1 var oName = document.getElementById("txtname");
var oBtn = document.getElementById("btnSearch");
var oTab = document.getElementById("tb1"); oBtn.onclick = function () {
for (i = 0; i < oTab.tBodies[0].rows.length; i++) {
var oStr = oTab.tBodies[0].rows[i].cells[1].innerText.toLocaleLowerCase();
var oText = oName.value.toLocaleLowerCase();
if (oStr.search(oText) != -1) {
oTab.tBodies[0].rows[i].style.background = "yellow";
}
else {
oTab.tBodies[0].rows[i].style.background = "";
}
}
}
}
</script>
</head>
<body>
<input type="text" name="txtname" id="txtname" /><input type="button" value="搜索" id="btnSearch" />
<table id="tb1" border="1" style="width: 500px;">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Cupid</td>
<td>66</td>
</tr>
<tr>
<td>2</td>
<td>Fly</td>
<td>45</td>
</tr>
<tr>
<td>3</td>
<td>Sky</td>
<td>23</td>
</tr>
<tr>
<td>4</td>
<td>Windy</td>
<td>98</td>
</tr>
<tr>
<td>5</td>
<td>Snow</td>
<td>09</td>
</tr>
</tbody>
</table>
</body>
</html>
Javascript表格中搜索的更多相关文章
- Jquery在表格中搜索关键字
<!DOCTYPE html><html><head> <title>ddd</title></head><body> ...
- JavaScript在表格中模拟搜索多关键词搜索和筛选
模拟搜索需要实现以下功能: 1.用户的模糊搜索不区分大小写,需要小写字母匹配同样可以匹配到该字母的大写单词. 2.多关键词模糊搜索,假设用户关键词以空格分隔,在关键词不完整的情况下仍然可以匹配到包含该 ...
- JavaScript表格搜索高亮功能模拟
在网页表格中模拟excle的搜索高亮显示功能.当在搜索框中输入需要的姓名时,若表格中存在对应的数据,则该表格背景色变为黄色. 下面为表的HTML源码: <!doctype html> &l ...
- 在DOM中搜索元素
方法 现代浏览器中使用XPath document.getElementById document/node.getElementsByTagName Limit search by parent e ...
- 分享12款 JavaScript 表格控件(DataGrid)
JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...
- 12款 JavaScript 表格控件(DataGrid)
JavaScript 表格控件可以操作大数据集的 HTML表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以很 ...
- ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...
- javascript作用域中令你意想不到的问题
大多数类c的语言,由一对花括号封闭的代码块就是一个作用域.但是javascript的作用域则是通过函数来定义.在一个函数中定义的变量只对这个函数内部可见,我们称为函数作用域. 1.在函数中引用一个变量 ...
- 使用jquery合并表格中相同文本的相邻单元格
一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...
随机推荐
- java大数--总结
BigInteger(高精度整数) 1.所在包: java.math.BigInteger 2.大数运算,以下返回类型均为BigInteger BigInteger a; BigInteger b; ...
- 《linux 网卡别名的添加和绑定》RHEL6
网卡别名的配置: 这个和ifconfig临时修改网卡ip 差不多,但是不一样.都是临时的,只要重启电脑就没了. 配永久的ip别名: cp ifcfg-eth0 ifcfg-eth0:0 vim if ...
- WP开发笔记——日期时间DateTime.Now函数
//2008年4月24日 System.DateTime.Now.ToString("D"); //2008-4-24 System.DateTime.Now.ToString(& ...
- 基础学习总结(八)--Intent中显示意图和隐式意图的用法
Intent(意图)主要是解决Android应用的各项组件之间的通讯.Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述,Android则根据此Intent的描述,负责找到对应的组 ...
- C++安装失败解决办法
法一:删除注册表中的HKY_LOCAL_MACHINE\\SYSTEM|ControlSet001\\Services\\VSS,卸载重装.法二:点击 setup目录下的 wpie15.exe .. ...
- 使用MongoDB的开源项目
根据谷歌的搜索结果筛选出来的. 统计应用 counlty https://count.ly/ mongopress 开源CMS系统 http://www.mongopress.org/ Rubedo ...
- openerp学习笔记 自定义小数精度(小数位数)
小数位数标识定义: lx_purchase/data/lx_purchase_data.xml <?xml version="1.0" encoding="utf- ...
- mapreduce 实现pagerank
输入格式: A 1 B,C,D B 1 C,Dmap: B A 1/3 C A 1/3 D A 1/3 A |B,C,D C B 1/2 D B 1/2 B |C,Dreduce: B (1-0.85 ...
- js 前加分号和感叹号是什么意思?
;!function(){}(); ;!有什么用? 从语法上来开,Javascript中分号表示语句结束,在开头加上,可能是为了压缩的时候和别的方法分割一下,表示一个新的语句开始.所以,如果在一个单 ...
- python之setattr,getattr,hasattr
可以使用setattr(), getattr(), hasattr()动态对实例进行操作. 相当于Java中的反射机制, 或者更确切地, 像JavaScript中属性操作. 具体属性: __dict_ ...