用HTML+JavaScript实现表格的分行变色加鼠标移动变高亮

亲爱的汉尼拔

于 2015-04-14 00:22:25 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/mememen1987/article/details/45035253

版权

本文介绍了如何使用HTML和JavaScript来实现表格中每一行交替变色的效果，并在鼠标移动到表格行上时实现高亮显示。通过结合CSS样式和JavaScript的事件监听，可以为表格增添交互性。

摘要由CSDN通过智能技术生成

用HTML+JavaScript实现表格的分行变色加鼠标移动变高亮

效果如下：

错误代码（只在srcipt中出现错误）：

<script>
        window.οnlοad=function(){
            var oTab=document.getElementById('tab1');

            for(var i=0;i<oTab.tBodies[0].rows.length;i++){
                if (i%2==0){
                    oTab.tBodies[0].rows[i].style.background='snow';
                }else{
                    oTab.tBodies[0].rows[i].style.background='white';
                }
                oTab.tBodies[0].rows[i].οnmοuseοver=function(){                  <pre name="code" class="javascript">                    oTab.tBodies[0].rows[i]<span style="font-family: Arial, Helvetica, sans-serif;">.style.background='green';</span>

}; oTab.tBodies[0].rows[i].οnmοuseοut=function(){ if (i%2==0){ oTab.tBodies[0].rows[i].style.background='snow'; }else{ oTab.tBodies[0].rows[i].style.background='white'; } }; } } </script>

在鼠标移入到哪一行时，这一行的背景颜色变为绿色，在鼠标移出时，如果i除2的余数是0的话，那么设置背景为snow，否则为white。

看