DOM search table 模糊搜索
2016-03-12 11:41
489 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> window.onload = function(){ var oTab = document.getElementById("tab1"); var oName = 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 sName = oName.value.toLowerCase() ; //利用search 模糊搜索 if(sTab.search(sName)!=-1){ oTab.tBodies[0].rows[i].style.background ="yellow"; }else{ oTab.tBodies[0].rows[i].style.background = ""; } } } } </script> <body> 姓名:<input type="text" id="name"/> <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>27</td> <td></td> </tr> <tr> <td>2</td> <td>张三</td> <td>23</td> <td></td> </tr> <tr> <td>3</td> <td>李四</td> <td>22</td> <td></td> </tr> <tr> <td>4</td> <td>王五</td> <td>25</td> <td></td> </tr> <tr> <td>5</td> <td>张伟</td> <td>24</td> <td></td> </tr> </tbody> </table> </body> </html>
相关文章推荐
- 六、从length和length()方法开始
- 五、String在Java中是传“引用”
- Fragment用法
- hdoj--1950 Bridging signals(LIS with O(nlogn))
- ARM第一部分-CPU和外部存储器的接口
- 使用pg_rman软件来实现postgresql数据库的备份恢复
- UVA-101 The Blocks Problem 栈
- linux-tar(转)
- MFC Button Control事件获取的两种方法
- thinkphp中的session的使用和理解!
- MySQL- 数据类型
- Node.js中Process.nextTick()和setImmediate()的区别
- 四、用“”或构造函数创建Java的String区别
- ARM第一部分-S5PV210的内存什么的地址映射详解
- 各种内部排序算法
- centos 7 安装MySQL(笔记)
- [手游新项目历程]第4天-PushFramework资料
- iOS上传失败提示"Request failed: unacceptable content-type: text/html"
- Win10,Win7,WinServer2012,WinServer2008内存最大支持
- af33 ARM第一部分-ARM体系结构要点总结