javascriptは表の内容を探してハイライトを表示します.

	
	
	


	  :
	  :
	  
	

		
     
		

			

				
  
				
  
				
  
				
  
			
		
		

			

				
1000
				
Jack
				
20
				
 
			
			

				
1001
				
Tom
				
24
				
 
			
			

				
1002
				
Roes
				
18
				
 
			
			

				
1003
				
Lucy
				
6
				
 
			
			

				
1004
				
Roes
				
34
				
 
			
		
	

	
		//     
		var txtId=document.querySelector('#txt-id');
		var txtName=document.querySelector('#txt-name');
		//         tr
		var trs=document.querySelector('tbody').querySelectorAll('tr');

		//           
		//document.getElementById('btn');
		document.querySelector('#btn').onclick=function(){
			// getInfoById(txtId.value);
			// getInfoByName(txtName.value);
			// getInfoto(txtId.value,txtName.value);
			var id=txtId.value,name=txtName.value;
			if (id!=''&&name=='') {
				getInfoById(id);
			}else if (id==''&&name!='') {
				 getInfoByName(name);
			}else{
				getInfoto(id,name);
			}

		};

		//      
		function clearBg(){
			for(var i=0;i<trs.length;i++){
				trs[i].style.backgroundColor='white';
			}
		}

		//  ID    
		function getInfoById(no){
			clearBg();
			//        
			for(var i=0;i<trs.length;i++){
				var id=trs[i].children[0].innerHTML;//      
				//             
				if (id==no) {
					trs[i].style.backgroundColor='yellow';
					break;//ID    ，        
				}
			}
		}

		//        
		function getInfoByName(name){
			clearBg();
			//        
			for(var i=0;i<trs.length;i++){
				var userName=trs[i].children[1].innerHTML;//      
				//               
				if (name==userName) {
					trs[i].style.backgroundColor='yellow';
				}
			}
		}

		//  ID     
		function getInfoto(no,name){
			clearBg();
			//        
			for(var i=0;i<trs.length;i++){
				var id=trs[i].children[0].innerHTML;//    ID
				var userName=trs[i].children[1].innerHTML;//      
				if (id==no&&name==userName) {
					trs[i].style.backgroundColor='yellow';
				}
			}
		}