Table alternate row color change upgraded version_javascript skills

Yesterday I made a table to change the color every other row, but it was only changed within one table
If there are multiple tables on one page, what should be done
to fiddle with new results
as follows:

Copy code The code is as follows:

function onloadEvent(func){
var one=window.onload
if (typeof window.onload!='function'){
window.onload=func
}
else{
window.onload=function(){
one();
func();
}
}
}
function showtable(tableid){
var overcolor='#FCF9D8';
var color1='#FFFFFF';
var color2='#F8F8F8';
var tablename=document.getElementById(tableid)
var tr=tablename.getElementsByTagName("tr")
for(var i=0 ;itr[i].onmouseover=function(){
this.style.backgroundColor=overcolor;
}
tr[i].onmouseout=function(){
if (this.rowIndex%2==0){
this.style.backgroundColor=color1;
}else{
this.style.backgroundColor=color2;
}
}
if(i%2==0){
tr[i].className="color1";
}else{
tr[i].className="color2";
}
}
}
onloadEvent(function init(){
showtable('table');
showtable('test');
}
);

In this way, it is OK to add the ID when adding a table in html. A table that has been called multiple times will change colors every other row
The awesome life does not need to be explained.