Rumah >hujung hadapan web >tutorial js >Kod kesan penyerlahan klik tetikus baris jadual yang dilaksanakan oleh kemahiran JS_javascript

Kod kesan penyerlahan klik tetikus baris jadual yang dilaksanakan oleh kemahiran JS_javascript

WBOY
WBOYasal
2016-05-16 15:29:211325semak imbas

Contoh dalam artikel ini menerangkan kod untuk kesan penyerlahan klik tetikus bagi baris jadual yang dilaksanakan dalam JS. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Sesekali apabila saya membaca pengumuman nilai bersih Rangkaian Dana Tiantian, saya mendapati sekeping kod js dilucutkan daripada kod sumber saya rasa ia lebih praktikal, saya ingin berkongsinya (hanya sah untuk IE)

<script type="text/javascript">
var highlightcolor='#E0F2FE';
var clickcolor='#ffedd2';
function MouseOver(){
 var source=event.srcElement;  
 if (source.tagName=="TD"){  
  source=source.parentElement;
  var cells = source.children; 
  if (cells[0].style.backgroundColor!=highlightcolor&&cells[0].style.backgroundColor!=clickcolor)
   for(i=0;i<cells.length;i++){
    cells[i].style.backgroundColor=highlightcolor;
   }  
 }
}
function MouseOut(){ 
 var source=event.srcElement;
 if (source.tagName=="TD"){ 
  source=source.parentElement;
  var cells = source.children; 
  if (cells[0].style.backgroundColor!=clickcolor) 
   for(i=0;i<cells.length;i++){
    cells[i].style.backgroundColor="";
   }  
 }
}
function MouseClick(){
 var source=event.srcElement;
 if (source.tagName=="TD"){ 
  source=source.parentElement;
  var cells = source.children;
  if (cells[0].style.backgroundColor!=clickcolor)
   for(i=0;i<cells.length;i++)
    cells[i].style.backgroundColor=clickcolor;   
  else
   for(i=0;i<cells.length;i++)
    cells[i].style.backgroundColor=""; 
 }
}
</script>
<table onmouseover="MouseOver()" onclick="MouseClick()" onmouseout="MouseOut()" cellspacing="0" bordercolordark="#ffffff" bordercolorlight="#cccccc" border="1" width="80%" align="center" style="cursor:pointer"> 
 <tr>
  <td>1</td>
  <td>a</td>
  <td>b</td>  
 </tr>
 <tr>
  <td>2</td>
  <td>c</td>
  <td>d</td>  
 </tr>
 <tr>
  <td>3</td>
  <td>e</td>
  <td>f </td>  
 </tr> 
 <tr>
  <td>4</td>
  <td>g</td>
  <td>h </td>  
 </tr> 
</table>

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn