纯js的tr嵌套，tr隐藏tr

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table class="table toggle-arrow-tiny">
        <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
            <th>Job Title</th>
            <th>Job Title</th>
        </tr>
        </thead>
        <tbody>
        <tr base-trid="123">
            <td>Isidra</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
        </tr>
        <tr trid-show="123">
            <td>Isidra</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
        </tr>
        <tr>
            <td>Isidra</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
        </tr>
        <tr>
            <td>Isidra</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
        </tr>
        <tr>
            <td>Isidra</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
        </tr>
        <tr>
            <td>Isidra</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
        </tr>
        <tr>
            <td>Isidra</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
        </tr>
        <tr>
            <td>Isidra</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
            <td>Boudreaux</td>
        </tr>
        </tbody>
    </table>


<script>
        function bindTrClick() {
            // ion-chevron-down
            const baseTrid = this.getAttribute("base-trid");
            let iTab= this.firstElementChild.firstElementChild.firstElementChild;
            if (iTab.className ==="ion-chevron-down"){
                iTab.className = "ion-chevron-right"
            }else{
                iTab.className = "ion-chevron-down"
            }

            let showTrarry = this.parentNode.querySelectorAll('tr[trid-show="' + baseTrid + '"]');

            for (let i = 0; i < showTrarry.length; i++) {
                showTrarry[i].style.display = showTrarry[i].style.display === "" ? "none" : "";

            }
        }

        function iconInit() {
            let trArry = document.getElementsByTagName("tr");
            for (let i = 0; i < trArry.length; i++) {
                let td = trArry[i].firstElementChild;
                if (!!trArry[i].getAttribute("base-trid")) {
                    td.innerHTML = '<span style="margin-right: 2px"><i class="ion-chevron-right"></i></span>' + td.innerText;
                } else if (!!trArry[i].getAttribute("trid-show")) {
                    td.innerHTML = '<span style="margin-right: 15px"></span>' + td.innerText;
                }
            }
        }

        const selectTrInit = () => {
            iconInit();
            let trArry = document.querySelectorAll("tr[base-trid]");
            for (let i=0; i<trArry.length;i++){
                trArry[i].onclick= bindTrClick
            }
        };

        window.onload = () => {
            selectTrInit()
        }

    </script>

</body>
</html>

 

posted @ 2021-03-05 19:50  陨落&新生  阅读(615)  评论(0)    收藏  举报