zoukankan      html  css  js  c++  java
  • DOM 搜索功能

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<script>
    				
    		window.onload = function(){
    			var oTab = document.getElementById("tab1");
    			var oName = document.getElementById("name");
    			var oBtn = document.getElementById("btn1");
    			
    			oBtn.onclick = function(){
    				
    				for(var i = 0 ; i <oTab.tBodies[0].rows.length;i++)
    				{
    					var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML;
    					var sName = oName.value;
    					//忽略大小写
    					if(sTab.toLowerCase() == sName.toLowerCase() ){
    						oTab.tBodies[0].rows[i].style.background ="yellow";
    					}else{
    						oTab.tBodies[0].rows[i].style.background = "";
    					}
    				}
    			}
    			
    		
    		}
    	</script>
    	<body>
    	姓名:<input type="text"  id="name"/>
    	<input id="btn1" 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>Blue</td>
    				<td>27</td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>2</td>
    				<td>张三</td>
    				<td>23</td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>3</td>
    				<td>李四</td>
    				<td>22</td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>4</td>
    				<td>王五</td>
    				<td>25</td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>5</td>
    				<td>张伟</td>
    				<td>24</td>
    				<td></td>
    			</tr>
    			
    		</tbody>
    		
    	</table>
    	</body>
    </html>
    

      

  • 相关阅读:
    提高SQL查询效率
    数据库主键设计之思考
    Hlg 1030 排序
    Hdu 1556 成段更新.cpp
    Hdu 4280 最大流<模板>.cpp
    POJ 3216 最短路径匹配+floyd
    Hdu 4268 multiset函数的应用
    ZOJ 3602 树的同构
    Hdu 4284 状态DP 能否走完所选城市.cpp
    Hlg 1481 二分图匹配+二分.cpp
  • 原文地址:https://www.cnblogs.com/mingjixiaohui/p/5268252.html
Copyright © 2011-2022 走看看