30 Nisan 2020

HTML Tablo da Genişletilebilir Satır 

//
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <style>
        .btnExp {
            border: 0px;
            background: transparent;
            font-weight: bold;
        }

        .hide {
            display: none;
        }

        .expBody {
            background-color: #f8f9fa;
            ;
        }
    </style>
</head>

<body>
    <table class="table expandableTable">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    <button type="button" class="btnExp">+</button>
                </th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr class="expBody hide">
                <td colspan="4">XXX</td>
            </tr>
            <tr>
                <th scope="row">
                    <button class="btnExp">+</button>
                </th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr class="expBody hide">
                <td colspan="4">ZZZ</td>
            </tr>
            <tr>
                <th scope="row">
                    <button class="btnExp">+</button>
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr class="expBody hide">
                <td colspan="4">YYY</td>
            </tr>
        </tbody>
    </table>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>

    <script>
        function hasClass(ele, cls) {
            return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
        }

        function addClass(ele, cls) {
            if (!hasClass(ele, cls)) ele.className += " " + cls;
        }

        function removeClass(ele, cls) {
            if (hasClass(ele, cls)) {
                var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                ele.className = ele.className.replace(reg, ' ');
            }
        }

        function expandableTable() {
            var expandableTables = document.getElementsByClassName('expandableTable');
            if (expandableTables != null) {
                for (var t = 0; t < expandableTables.length; t++) {
                    tt = expandableTables[t];
                    var expBtns = tt.getElementsByClassName('btnExp');
                    if (expBtns != null) {
                        for (var b = 0; b < expBtns.length; b++) {
                            var expBtn = expBtns[b];
                            expBtn.addEventListener('click', function (e) {
                                var btn = e.srcElement;
                                var _tr = btn.parentElement.parentElement.nextElementSibling;
                                if (btn.innerText == '-') {
                                    btn.innerText = '+';
                                    addClass(_tr,'hide');
                                } else {
                                    btn.innerText = '-';
                                    removeClass(_tr,'hide');
                                }
                            }, false);
                        }
                    }
                }
            }
        }
        expandableTable();
    </script>
</body>
</html>
//
Gönderen zaman: