jquery.repeater
jquery.repeater copied to clipboard
Published
20 hours ago •
DubFriend
DubFriend
Nested Repeater with tables
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
<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>
