【JS学習まとめ】JSを使用して表のハイライト表示を実現する方法

前言:このシリーズは、JavaScriptを学んで実現したいくつかの小さなdemoをまとめたもので、なんだかこのように勉強できなくてもいいので、休みのうちにしっかりまとめましょう.
通常のウェブサイト開発では、表のハイライト表示を実現する必要があるというニーズによく遭遇します.ハイライト表示とはどういうことですか.実は、私たちのマウスが表の行に移動すると、ある行は元の背景色を変えます.私たちがマウスを移動すると、表の行は元の背景色に戻ります.では、この効果はどのように実現されますか.

使用される技術点は次のとおりです。

JSイベント:
onload:ページロード
onmouseover:マウス移動イベント
onmouseout:マウス移動イベント
thisキーワード:関数の内部で、thisキーワードは現在の操作要素を表します.
setAttribute(name,value):この方法で行の元の背景色を格納できます.マウスがイベントトリガから移動した後、元の背景色を復元できます.
コードは次のとおりです.
HTMLコード:

		

			

				

					
  
					
  
					
  
				
			
			

				

					
1
					
  
					
20
				
				

					
2
					
  
					
20
				
				

					
3
					
  
					
20
				
				

					
4
					
  
					
20
				
				

					
5
					
  
					
20
				
			
		
	

JSコード:

			window.onload = function(){
				var tabEle = document.getElementById("tab");
				var allTr = tabEle.tBodies[0].getElementsByTagName("tr");
				//        （       ）
				for(var i=0;i<allTr.length;i++){
					//           
					allTr[i].onmouseover = function(){
						//        
						this.setAttribute("bgc",this.style.backgroundColor);
						//     
						this.style.backgroundColor = "yellow";
					}
					//           
					allTr[i].onmouseout = function(){
						//       
						this.style.backgroundColor = this.getAttribute("bgc");
					}
				}
			}