js练习第三天

最新推荐文章于 2024-07-20 10:36:53 发布

小何童鞋

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量173

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45111873/article/details/108074648

版权

js练习

习题：

习题：

表单（鼠标移动变色）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title>Document</title>
    <style>
        table {
    
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        thead tr {
    
            height: 30px;
            background-color: skyblue;
        }

        tbody tr {
    
            height: 30px;
        }

        tbody td {
    
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }

        .bg {
    
            background-color: pink;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>代码</th>
        <th>名称</th>
        <th>最新公布净值</th>
        <th>累计净值</th>
        <th>前单位净值</th>
        <th>净值增长率</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债券</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
    </tr>
    </tbody>
</table>
<script>
    var trs = document.querySelector('tbody').querySelectorAll('tr')
    for (var i = 0; i < trs.length; i++) {
    
        trs[i].onmouseover = function () {
    
            this.className = 'bg';
        }
        trs[i].onmouseout = function () {
    
            this.className = '';
        }
    }
</script>
</body>
</html>

百度换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
    
            margin: 0;
            padding

最低0.47元/天解锁文章

小何童鞋

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js练习第三天

表单（鼠标移动变色）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <title>Document</title> <style> table { width: 800px; margi
复制链接

扫一扫