JavaScript DOM程式設計藝術—表格的奇數行在點選時實現斑馬線效果
阿新 • • 發佈：2019-02-18
表格的奇數行在點選時實現斑馬線效果
addLoadEvent.js檔案
addClass.js
DOM可以實現CSS動作層的效果，但要注意合理利用。
test.html檔案
<!document html> <html> <head> </head> <body> <table border="1" width="400" height="200"> <tr> <td></td><td></td> </tr> <tr> <td></td><td></td> </tr> <tr> <td></td><td></td> </tr> <tr> <td></td><td></td> </tr> <tr> <td></td><td></td> </tr> <tr> <td></td><td></td> </tr> </table> <link rel="stylesheet" href="css.css" /> <script type="text/javascript" src="addLoadEvent.js"></script> <script type="text/javascript" src="addClass.js"></script> </body> </html>
css.css檔案
.odd{
background-color:red;
}
.white{
background-color:white;
}addLoadEvent.js檔案
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}
else{
window.onload = function(){
oldonload();
func();
}
}
}addClass.js
function addClass(element,value){ if(!element.className){ element.className = value; } else{ element.className += " "; element.className += value; } } function show(){ var trs = document.getElementsByTagName("tr"); var odd = false; for(var i=0; i<trs.length; i++){ if(odd == false){ trs[i].onmouseover = function(){ addClass(this,"odd"); } trs[i].onmouseout = function(){ addClass(this,"white"); } odd = true; } else{ odd = false; } } }
DOM可以實現CSS動作層的效果，但要注意合理利用。