（32）DOM应用之搜索表格中的内容（忽略大小写搜索）

来源：互联网发布：8月信贷数据编辑：程序博客网时间：2024/05/22 05:17

基本思路：使用toLowerCase()函数即可实现忽略大小写的搜索。

<!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;//获取表格中name这一列单元格的内容var sTxt=oTxt.value;//获取用户输入的内容if(sTab.toLowerCase()==sTxt.toLowerCase()){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