Javascript simple implementation of the table row spacing display color and highlight

  • 2020-03-30 00:40:46
  • OfStack

<script type="text/javascript"> 
var name; //The class name of the tr object is stored and restored when the mouse is moved away
function trcolor(){ //Table row color intervals are displayed
var tabNode = document.getElementsByTagName("table")[0]; 
var trNodes = tabNode.rows; 
for(var x=1;x<trNodes.length;x++){ 
if(x%2 == 1) 
trNodes[x].className = "one" ; 
trNodes[x].className = "two" ; 
trNodes[x].onmouseover = function(){ //The highlighted
name = this.className; 
this.className = "over"; 
trNodes[x].onmouseout = function(){ //The tr object adds an onmouseout event property
this.className = name ; 
window.onload = trcolor ; 

<style type="text/css"> 
table{ width:60%; border:solid 1px #0066FF;} 
table td {border:solid 1px #0099ff;} 
a{ text-decoration: none;} 
.one{background-color: red;} 
.two{background-color: blue;} 
.over{background-color: yellow;} 

<td> The name </td><td> age </td><td> address </td> 
<td> Zhang SAN </td><td>23</td><td> Beijing </td> 
<td> Li si </td><td>25</td><td> Shanghai </td> 
<td> Cathy </td><td>15</td><td> Guangzhou </td> 
<td> Tang always </td><td>20</td><td> changsha </td> 

Related articles: