<!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>
扫一扫
662
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
