<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<script>
window.οnlοad=function()
{
var oTab=document.getElementById('tab1');
var oName=document.getElementById('name');
var oBtn=document.getElementById('btn');
oBtn.οnclick=function()
{
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTex=oName.value.toLowerCase();
var arr=sTex.split(' ');
oTab.tBodies[0].rows[i].style.background='';
for(var j=0;j<arr.length;j++)
{
if(sTab.search(arr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.background='green';
}
}
}
}
}
</script>
</head>
<body>
姓名:<input id="name" type="text" />
<input id="btn" type="button" value="搜索" />
<table id="tab1" border="1" width="500" >
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>王莉</td>
<td>21</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>刘寒青</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>袁文婷</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>张素婷</td>
<td>21</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>袁文风</td>
<td>21</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>purpose</td>
<td>20</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
表单模糊搜索
最新推荐文章于 2024-06-24 13:50:58 发布