Dom 表格行变色

最新推荐文章于 2022-04-22 12:08:30 发布

Soloensiz

最新推荐文章于 2022-04-22 12:08:30 发布

阅读量387

点赞数

分类专栏： web前端文章标签： dom web前端

本文链接：https://blog.csdn.net/Lu_1u/article/details/75094807

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
    <style type="text/css">
        td{
            border-bottom:1px solid lightgray;
            width:100px;
            height:25px;
        }

        .firstTd{
            width:30px;
        }
    </style>

    <script type="text/javascript">

        window.onload = function () {
            var table = document.getElementById("table");
            var trs = table.getElementsByTagName("tr");


            for(var i=1; i < trs.length; i++){

                var tr = trs.item(i);

                tr.onmouseover = function () {
                    this.style.backgroundColor="lightgray";
                }
                tr.onmouseout = function(){
                    this.style.backgroundColor=null;
                }

            }


        }



    </script>

</head>
<body>
    <table id="table" border="0" cellpadding="0" cellspacing="0" style="width:600px">
        <tr><td class="firstTd"></td> <td>收件人</td><td>主题</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail"/></td><td>哈哈哈</td><td>.....</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail"/></td><td>哈哈哈</td><td>.....</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail"/></td><td>哈哈哈</td><td>.....</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail"/></td><td>哈哈哈</td><td>.....</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail"/></td><td>哈哈哈</td><td>.....</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail"/></td><td>哈哈哈</td><td>.....</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail"/></td><td>哈哈哈</td><td>.....</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail"/></td><td>哈哈哈</td><td>.....</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail"/></td><td>哈哈哈</td><td>.....</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail"/></td><td>哈哈哈</td><td>.....</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail"/></td><td>哈哈哈</td><td>.....</td></tr>
    </table>
</body>
</html>