读书人

table 隔行变色,而且鼠标经过时变色

发布时间: 2012-11-22 00:16:41 作者: rapoo

table 隔行变色,并且鼠标经过时变色.

HTML样式:

?

table 隔行变色,并且鼠标经过时变色.

?

代码如下:

?

js代码如下:<script language="javascript">function show(){var tab=document.getElementById("tab");var tr=tab.getElementsByTagName("tr"); for(var i=0;i<=tr.length;i++){ if(i%2==0){ tr[i].style.backgroundColor="#ccc"; tr[i].onmouseover=function(){this.style.background="red"}; tr[i].onmouseout=function(){this.style.background="#ccc"} }else{ tr[i].style.backgroundColor="#fff"; tr[i].onmouseover=function(){this.style.background="red"}; tr[i].onmouseout=function(){this.style.background="#fff"} }}}window.onload=show;</script>html代码如下:<table id="tab"><tr><td>dfdsf</td><td>dfdsf</td></tr><tr><td>dfdsf</td><td>dfdsf</td></tr><tr><td>dfdsf</td><td>dfdsf</td></tr><tr><td>dfdsf</td><td>dfdsf</td></tr><tr><td>dfdsf</td><td>dfdsf</td></tr></table>本文转载自web前端寒风:http://www.uedcss.com/post/tablechangecolor.html

?

读书人网 >Web前端

热点推荐