一个简单的节点操作案例

最新推荐文章于 2021-01-19 18:54:40 发布

Roger Zhang

最新推荐文章于 2021-01-19 18:54:40 发布

阅读量222

点赞数 1

分类专栏： JavaScript 文章标签： css js

本文链接：https://blog.csdn.net/weixin_45787050/article/details/103266466

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一个简单的节点操作案例

css和html

<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>

 <table>
        <thead>
            <tr>
                <th>JavaScript</th>
                <th>JavaScript</th>
                <th>JavaScript</th>
                <th>JavaScript</th>
                <th>JavaScript</th>
                <th>JavaScript</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>avaScriptJavaScriptJavaScript</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农avaScriptJavaScriptJavaScript</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农avaScriptJavaScriptJavaScript</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>avaScriptJavaScriptJavaScript</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>JavaScriptJavaScriptJavaScript</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>JavaScriptJavaScriptJavaScript</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>

js部分

<script>
        // 1.获取元素 获取的是 tbody 里面所有的行
        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>