JavaScript—DOM进阶操作—表格的行变色#添加删除表格的行

最新推荐文章于 2022-05-15 21:39:41 发布

原创最新推荐文章于 2022-05-15 21:39:41 发布 · 247 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #dom #web #js

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页交互效果，当鼠标悬停在HTML表格的行上时，该行的背景颜色会变为黄色。此外，还通过CSS设置了奇数行的背景颜色为粉红色，增强了表格的视觉效果。

表格的行颜色随鼠标移动而改变--javascript

表格的行颜色随鼠标移动而改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    window.onload=function () {
        var oTab=document.getElementById('tab1');
        var oldColor='';
        for(var i=0; i<oTab.tBodies[0].rows.length; i++){
            oTab.tBodies[0].rows[i].onmouseover=function () {
                oldColor=this.style.background;
                this.style.background='yellow';
            };
            oTab.tBodies[0].rows[i].onmouseout=function () {
                this.style.background=oldColor;
            };
            if(i%2){
                oTab.tBodies[0].rows[i].style.background='pink';
            }
        }
    }
</script>
<body>
    <table id="tab1"  border="1"   width="300">
        <thead>
            <td>ID</td>
            <td>情况</td>
            <td>权重</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>GRE</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>托福</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>GPA</td>
                <td>6</td>
            </tr>
            <tr>
                <td>1</td>
                <td>奖项</td>
                <td>2</td>
            </tr>
            <tr>
                <td>1</td>
                <td>论文</td>
                <td>2</td>
            </tr>
            <tr>
                <td>1</td>
                <td>大厂实习</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>
</body>
</html>