js控制表格Table隔行换色,鼠标经过换色

WEB前端 无名氏 1105℃ 百度已收录 扫描二维码
<table id="main_table" cellspacing="1">
<caption>Table隔行换色示例</caption>
<thead>
<tr>
<td>ID</td>
<td>Time</td>
<td>Award</td>
<td>Amount</td>
</tr>
</thead>       
<tbody id="tInfo">
<tr>
 <td>1</td>
 <td>2008.11.16</td>
 <td>¥50</td>
 <td>10</td>
</tr>
<tr>
 <td>2</td>
 <td>2008.11.16</td>
 <td>¥50</td>
 <td>10</td>
</tr>
<tr>
 <td>3</td>
 <td>2008.11.16</td>
 <td>¥50</td>
 <td>10</td>
</tr>
</tbody>
</table>
(function(){
        var sTable = document.getElementById('tInfo');
        var rows = sTable.getElementsByTagName('tr'), i, len = rows.length;
        var lastClass = '';
       
        if(sTable && len > 1){
                for( i = 0; i < len; i ++){
                        rows[i].className = i % 2 == 0 ? 'even' : 'odd';
                       
                        rows[i].onmouseover = function(){
                                alert(this.className);
                                lastClass = this.className;
                                this.className = 'hover';
                        };
                       
                        rows[i].onmouseout = function(){
                                this.className = lastClass;
                        };
                }      
        }
})();


本文固定链接:成事博客js控制表格Table隔行换色,鼠标经过换色
喜欢 (0)分享 (0)