I have the following code where I can add a new line to a table in HTML, it always adds me in the last row
My idea is to press the button +
and thus create a new line below it. The idea is to be able to find the one <tr>
closest to that click event.
I hope I have explained myself well
I hope I have explained myself well. Greetings.
$(document).ready(function() {
$('#main_table').on('click', 'i.new_row', function(e) {
var i = $('#main_table tbody tr ').length;
var html_data = "<tr>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"</tr>";
$('#main_table').find('tbody').append(html_data);
});
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<table id="main_table" class="table table-bordered">
<thead>
<tr>
<th>Pedido</th>
<th>Item</th>
<th>Cantidad a despachar</th>
<th>Stock</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="1"></th>
<th colspan="3"><strong>00001</strong></th>
<th colspan="1">
<div class="form-check form-check-inline"><label class="form-check-label" for="check_rows1"></label><i class='fa fa-plus new_row'></i> </div>
</th>
</tr>
<tr>
<td>001</td>
<td>PRODUCTO1</td>
<td data-name="cantidad" class="cantidad" data-type="text">50</td>
<td>100</td>
<td>
<div class="form-check form-check-inline"><input type="checkbox" class="form-check- input" id="Escoge1" name="Escoge"><label class="form-check-label" for="Escoge1"></label></div>
</td>
</tr>
<tr>
<td>002</td>
<td>PRODUCTO1</td>
<td data-name="cantidad" class="cantidad" data-type="text">40</td>
<td>50</td>
<td>
<div class="form-check form-check-inline"><input type="checkbox" class="form-check- input" id="Escoge1" name="Escoge"><label class="form-check-label" for="Escoge1"></label></div>
</td>
</tr>
<tr>
<th colspan="1"></th>
<th colspan="3"><strong>00002</strong></th>
<th colspan="1">
<div class="form-check form-check-inline"><label class="form-check-label" for="check_rows1"></label><i class='fa fa-plus new_row'></i> </div>
</th>
</tr>
<tr>
<td>004</td>
<td>PRODUCTO2</td>
<td data-name="cantidad" class="cantidad" data-type="text">50</td>
<td>100</td>
<td>
<div class="form-check form-check-inline"><input type="checkbox" class="form-check- input" id="Escoge1" name="Escoge"><label class="form-check-label" for="Escoge1"></label></div>
</td>
</tr>
</tbody>
</table>
In JQuery there is a function
after()
that allows you to insert HTML into the DOM after the selected element. Throughthis
we can capture the element that has been clicked (in your case the<i>
) to then ascend to its parent<tr>
and insert the row next to that<tr>
.