search

DubFriend / jquery.repeater

Create a repeatable group of input elements
MIT License
388 stars 191 forks source link

Nested Repeater with tables #169

Open MusheAbdulHakim opened 1 year ago

MusheAbdulHakim commented 1 year ago

I am trying to use nested repeater inside table. Unfortunately, the nested repeater doesn't work. But the parent repeater works fine. Any Help is appreciated. Thanks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>

    <table class="table job_details">
        <thead>
            <tr>
                <th>T1</th>
                <th>T2</th>
                <th width="4%">
                    <button data-repeater-create type="button" class="btn btn-icon btn-outline-primary waves-effect">
                        Plus
                    </button>
                </th>
            </tr>
        </thead>
        <tbody data-repeater-list="job_details">
            <tr data-repeater-item>
                <td>
                    <input type="text" class="form-control">
                </td>
                <td>
                    <input type="text" class="form-control">
                </td>
                <td>
                    <button title="Delete" data-repeater-delete type="button" class="btn btn-icon btn-outline-danger waves-effect">
                       Delete
                    </button>
                </td>

                <!-- innner repeater -->
                <div class="inner-repeater">
                    <div data-repeater-list="inner-list">
                    <div data-repeater-item>
                        <input type="text" name="inner-text-input" value="B"/>
                        <input data-repeater-delete type="button" value="Delete"/>
                    </div>
                    </div>
                    <input data-repeater-create type="button" value="Add"/>
                </div>

            </tr>
        </tbody>
    </table>

</body>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="./jquery.repeater.min.js"></script>
<script>
     $(document).ready(function () {
        $('.job_details').repeater({

            show: function () {
                $(this).slideDown();
            },
            hide: function (deleteElement) {
                $(this).slideUp(deleteElement);

            },
            repeaters: [{
                selector: '.inner-repeater',
                show: function () {
                    $(this).slideDown();
                },
                hide: function (deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            }]
        })
    });
</script>
</html>
vbatalov commented 1 year ago 
<div class="wood_harvesting_inner">
    <div class="form-group mt-5" data-kt-sticky="true">
        <a href="javascript:;" data-repeater-create class="btn btn-sm btn-light-primary">
            <i class="ki-duotone ki-plus fs-3"></i>            
        </a>
    </div>
    <div class="table-responsive">
        <table class="table">
            <tbody data-repeater-list="wood_harvesting_inner">
            <tr>
                no repeater <tr>
            </tr>
            <tr data-repeater-item>
                <td class="text-end">
                    <label class="fs-6 fw-semibold mb-2 min-w-200px text-nowrap"></label>

                    <a href="javascript:;" data-repeater-delete class="btn btn-light-danger text-end">
                        <i class="ki-duotone ki-trash fs-5"><span class="path1"></span><span
                                    class="path2"></span><span class="path3"></span><span
                                    class="path4"></span><span class="path5"></span></i>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>