- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <script>
- window.onload=function(){
- var oBtn=document.getElementById('btn');
- var oName=document.getElementById('name');
- var oTab=document.getElementById('tab');
- oBtn.onclick=function(){
- for(var i=0;i<oTab.tBodies[0].rows.length;i++){
- var str1=oName.value.toLocaleLowerCase();
- var str2=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLocaleLowerCase();
- if(str2.search(str1)!=-1){
- oTab.tBodies[0].rows[i].style.background='#f00';
- str1='';
- }else{
- oTab.tBodies[0].rows[i].style.background='';
- }
- }
- }
- }
- </script>
- <body>
- 姓名:
- <input type="text" id="name"/>
- <button id="btn">搜索</button>
- <br/>
- <table id="tab" width="200px" border="1">
- <thead>
- <tr>
- <th>id</th>
- <th>姓名</th>
- <th>年龄</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>张三</td>
- <td>67</td>
- </tr>
- <tr>
- <td>2</td>
- <td>李四</td>
- <td>36</td>
- </tr>
- <tr>
- <td>3</td>
- <td>王五</td>
- <td>69</td>
- </tr>
- <tr>
- <td>4</td>
- <td>赵六</td>
- <td>20</td>
- </tr>
- <tr>
- <td>5</td>
- <td>张某</td>
- <td>45</td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
来源: http://blog.csdn.net/sunjynyue/article/details/78070646