（33）DOM应用之搜索表格中的内容（模糊搜索）

来源：互联网发布：c语言编程题库编辑：程序博客网时间：2024/05/22 10:57

基本思路：使用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>

效果图：

1 0