表单模糊搜索

最新推荐文章于 2024-06-24 13:50:58 发布

烧了回忆取暖

最新推荐文章于 2024-06-24 13:50:58 发布

阅读量557

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/kanuoyuan/article/details/24327353

版权

js 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

<!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>