首页 > 其他分享> > JS：表格的行点击变换

JS：表格的行点击变换

2022-07-14 19:36:06 作者：互联网

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style>
        table {
            border: 1px red solid;
        }

        tr {
            width: 100%;
            height: 40px;
        }

        td {
            width: 100px;
            border: 1px darkred solid;
        }
    </style>
</head>

<body>
    <table id="tb" cellspacing='0'>
        <tr class='tr1'>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr class='tr1'>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr class='tr1'>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr class='tr1'>
            <td>4</td>
            <td>4</td>
        </tr>
    </table>
    <script>
        var tr = document.querySelectorAll('.tr1');
        var td = document.querySelectorAll('td');
        var table = document.querySelectorAll('#tb')

        for (let i = 0; i < tr.length; i++) {
            tr[i].onclick = function () {
                tr.forEach((el) => {
                    el.style.backgroundColor = 'white';
                })
                    tr[i].style.backgroundColor = 'blue';

            }
        }
    </script>
</body>

</html>

标签：el,表格,querySelectorAll,tr,JS,点击,var,td,document
来源： https://www.cnblogs.com/LIXI-/p/16479007.html