Js processing table to decorate the table

Js processing table

1. Line color interval display
CSS styles: two selectors

 
<style type="text/css"> 
.one{ 
background-color:#33ffcc; 
} 
.two{ 
backgound-color:#ffff66; 
} 
</style> 
<script type="text/javascript"> 
function trcolor() 
//The color of the control spacing row is different
{ 
var tabNode = document.getElementsByTagName("table")[0]; 
//Get table node
var trs = tabNode.rows; 
//Gets all the rows in the table
for(var x=1; x<trs.length;x++) 
{ 
if(x%2 == 1) 
trs[x].className ="one"; 
else 
trs[x].className ="two"; 
} 
} 

//With the onload method, after the web page is loaded, run the trcolor method to achieve the color of the spaced rows in the table.
window.onload = function() 
{ 
trcolor(); 
} 
</script> 

2. Move the mouse to a certain line, change the color to highlight, remove the original color

 
<style type="text/css"> 
.over{ 
background-color:##00ff00; 
} 
<style> 

<script type="text/javascript"> 
var name; 
function trMouse() 
{ 
var tabNode = document.getELementsByTagName("table")[0]; 
//Through the for loop, add the onmouseover and onmouseout attributes to each tr tag
for(var x=0;x<trs[x].length;x++) 
{ 
trs[x].onmouseover = function() 
{ 
name=this.className; 
this.className="over"; 
} 
tes[x].onmouseout = function() 
{ 
this.className = name; 
} 
} 
} 
</script>