原生JS中的排他思想，为啥在本案例中失效了？

青松100 2020-04-30 03:27:26

请教一下，为啥下面这个练习，为啥　111　行　的第二个for 循环不能用？

我想去除所有的背景，后再给点击的行添加颜色。

现在只能添加背景的粉红色，不能去掉其它行的背景

谢谢！



<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

        // 1.获取元素 获取的是 tbody 里面所有的行

        var trs = document.querySelector('tbody').querySelectorAll('tr');

        // 2. 利用循环绑定注册事件

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

            // 

            trs[i].onclick = function() {

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

                       trs[i].style.backgroundColor= '';

                    

                   }

                   this.className = "bg";

                   

                }

             

        }

    </script>



</body>



</html>

...全文

112 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

青松100 2020-04-30

打赏
举报

引用 1 楼天际的海浪的回复:

for (var i = 0; i < trs.length; i++) { // trs[i].onclick = function() { for(var i = 0; i < trs.length; i++) { trs[i].className = ''; } this.className = "bg"; } }

万分感谢大佬的帮助。如果没有您，不知还要纠结多久。另外，其他被邀请的大佬，不用回复了。有大神帮助我了。

天际的海浪 2020-04-30

打赏
举报

for (var i = 0; i < trs.length; i++) { // trs[i].onclick = function() { for(var i = 0; i < trs.length; i++) { trs[i].className = ''; } this.className = "bg"; } }