(33)DOM应用之搜索表格中的内容(模糊搜索)
2014-07-21 17:44
471 查看
基本思路:使用search()函数,只需要输入要搜索的内容的一部分就可以搜索出相应的记录,从而达到模糊搜索的目的。当search搜索出有相应的内容的时候就会显示相应的内容在字符串中的位置索引,当搜索的内容不存在的时候search会返回-1。
效果图:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload=function () { var oTab=document.getElementById('tab1'); var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('name'); 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();//获取表格中name这一列单元格的内容 var sTxt=oTxt.value.toLowerCase();//获取用户输入的内容 if(sTab.search(sTxt)!=-1) { oTab.tBodies[0].rows[i].style.background='yellow'; } else { oTab.tBodies[0].rows[i].style.background=''; } } }; }; </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> </thead> <tbody> <tr> <td>1</td> <td>Xuan</td> <td>23</td> </tr> <tr> <td>2</td> <td>XXX</td> <td>25</td> </tr> <tr> <td>3</td> <td>SSS</td> <td>24</td> </tr> <tr> <td>4</td> <td>李四</td> <td>26</td> </tr> <tr> <td>5</td> <td>王五</td> <td>29</td> </tr> </tbody> </table> </body> </html>
效果图:
相关文章推荐
- (31)DOM应用之搜索表格中的内容(简单搜索)
- (34)DOM应用之搜索表格中的内容(多关键字搜索)
- (32)DOM应用之搜索表格中的内容(忽略大小写搜索)
- ui-grid应用(调整了表格行高)+指定列模糊查询+联动搜索
- DOM高级应用——表格元素的添加、删除、搜索操作1
- JavaScript document 对表格内容搜索 模糊搜索 多个关键字搜索
- (35)DOM应用之表格中的内容排序
- 25、DOM的高级应用2-------表格内容的排序
- dom 小应用--活动表格
- jquery 表格排序,实时搜索表格内容
- DOM在表格中的应用
- jQuery 表格应用:隔行变色,展开关闭,内容筛选
- A. DOM高级06 表格搜索01
- VB6基本数据库应用(八):模糊搜索与基于范围的搜索
- angular.js表格内容搜索过滤代码
- lucene中模糊搜索的应用场景
- 表格数据模糊搜索
- CoreSpotlight 系统搜索栏表格内容搜索
- DOM search table 模糊搜索
- 客户端将表格内容导出到EXCEL(DOM+VBS+OFFICE自动化)