Table interlace JavaScript code _javascript Tips

Effect Demo Code:

<table id= "DataTable" > <tr> <td> Cloud Habitat </td> </tr> <tr> <td>www.jb51.net< /TD> </tr> <tr> <td> Cloud Community </td> </tr> <tr> <td>www.jb51.net</td> & Lt;/tr> <tr> <td> Cloud Community </td> </tr> <tr> <td>www.jb51.net</td> </tr> <tr> <td> Cloud Community </td> </tr> <tr> <td>www.jb51.net</td> </tr> </tab le> <script> function showtable () {var color1 = "rgb (234,240,255)"; var color2 = "rgb (255,255,255)"; var bgcolor = "RGB (255,255,193)"; var trs = document.getElementById ("DataTable"). getElementsByTagName ("tr"); for (Var i=0;i<trs.length-1;i++) {if (i%2==0) {trs[i].style.backgroundcolor=color1; Trs[i].onmouseover = function () {this.style.backgroundColor = bgcolor; } trs[i].onmouseout = function () {this.style.backgroundColor = Color1; } else {Trs[i].style.backgroundcolor=color2; Trs[i].onmouseover = function () {this.style.backgroundColor = bgcolor; } trs[i].onmouseout = function () {this.style.backgroundColor = Color2; }}} showtable () </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Core code:

Copy Code code as follows:

function showtable () {
var color1 = "rgb (234,240,255)";
var color2 = "rgb (255,255,255)";
var bgcolor = "RGB (255,255,193)";
var trs = document.getElementById ("DataTable"). getElementsByTagName ("tr");
for (Var i=0;i<trs.length-1;i++) {
if (i%2==0) {
Trs[i].style.backgroundcolor=color1;
Trs[i].onmouseover = function () {
This.style.backgroundColor = bgcolor;
}
Trs[i].onmouseout = function () {
This.style.backgroundColor = Color1;
}
Else {
Trs[i].style.backgroundcolor=color2;
Trs[i].onmouseover = function () {
This.style.backgroundColor = bgcolor;
}
Trs[i].onmouseout = function () {
This.style.backgroundColor = Color2;
}
}
}
}