I have a form, In this form, have a bootstrap 5 table. User can add new row in table by clicking "Add New" Button. Every row has their own child table, that I have display in modal. User can add multiple row in child table also. Not only add new row but also can delete, edit everything.
For adding new row in main table i am using below code and its working fine.
$(document).ready(function() {
var itemCounter = 1;
$("#addrow").on("click", function() {
itemCounter += 1;
var newRowItem = `<tr>
<td class="p-0" style="width: 50%;">
<select class="form-control select2" name="ldeger[]">
<option>Select</option>
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</select>
</td>
<td class="p-0" style="width: 15%;">
<input type="text" name="balance[]" class="form-control"
value="0.000" placeholder="0.000" readonly />
</td>
<td class="p-0" style="width: 15%;">
<input type="number" name="debit[]" class="form-control"
value="0.00" />
</td>
<td class="p-0" style="width: 15%;">
<input type="number" name="credit[]" class="form-control"
placeholder="0.00" value="0.00" />
</td>
<td class="p-0" style="width: 5%;">
<div class="d-flex gap-3 text-center">
<a href="#" data-bs-toggle="modal"
data-bs-target="#exampleModal` + itemCounter + `"><i
class="bx bx-dots-vertical font-size-18"></i></a>
<a href="#" class="text-danger itemDel"><i
class="mdi mdi-delete font-size-18"></i></a>
</div>
<div class="modal fade" id="exampleModal` + itemCounter + `" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true"
style="display: none;">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Bill
Details</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<div class="table-responsive text-nowrap">
<table class="table table-bordered w-100">
<thead class="table-light">
<tr>
<th scope="col">Type</th>
<th scope="col">Particulars
</th>
<th scope="col">Date</th>
<th scope="col">Debit</th>
<th scope="col">Credit</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody id="billDetails` + itemCounter + `">
<tr>
<td class="p-0"
style="width: 10%;">
<select
class="form-select">
<option value="1">
New Ref</option>
<option value="2">
Adj Ref</option>
</select>
</td>
<td class="p-0"
style="width: 30%;">
<select class="form-select"
name="ldeger[]">
<option>Select</option>
<option value="AK">
Alaska</option>
<option value="HI">
Hawaii</option>
</select>
</td>
<td class="p-0"
style="width: 15%;">
<input type="date"
name="date[]"
class="form-control" />
</td>
<td class="p-0"
style="width: 15%;">
<input type="number"
name="debit[]"
class="form-control"
value="0.00" />
</td>
<td class="p-0"
style="width: 15%;">
<input type="number"
name="credit[]"
class="form-control"
placeholder="0.00"
value="0.00" />
</td>
<td class="p-0"
style="width: 5%;">
<div class="text-center">
<a href="#"
class="text-danger billDetailRowDel"><i
class="mdi mdi-delete font-size-18"></i></a>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td style="width: 50%"
colspan="2"
style="text-align: left;">
<input type="button"
class="btn btn-lg btn-block "
id="addRowBillDetails"
value="+ Add New Row" />
</td>
<td style="width: 15%"></td>
<td style="width: 15%"><i
class="bx bx-rupee"></i><strong
class="text-dark">0.00</strong>
</td>
<td style="width: 15%"><i
class="bx bx-rupee"></i><strong
class="text-dark">0.00</strong>
</td>
<td style="width: 5%"></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button"
class="btn btn-primary">Okay</button>
</div>
</div>
</div>
</div>
</td>
</tr>
`
$("#dynamicTable").append(newRowItem);
});
$("#dynamicTable").on("click", ".itemDel", function(event) {
if (confirm("Do you want to remove this item?") == true) {
$(this).closest("tr").remove();
itemCounter -= 1
}
});
But how can I add, delete row in sub table?
Take a look in jsfiddler
In this example, When I click on 'Add New Row' button, New row added. When I click on 'View' button, Model open for this row but when I was trying to add row by clicking on 'Add New Row' button on the modal nothing works. Also need to delete row by click on 'Delete' button on the modal. How can I do this?