I have the following code, from a modal I add orders to a table, the idea is to detect the first empty line and add data to it. When entering data to this line, you must find the <input type="hidden">
to assign a value and also enable <checkbox>
the line if the amount is greater than 50
.
$('#tbl_folio').on('click', 'button.replay', function(e) {
var cliente = $(this).closest('tr').find('td:eq(0)').text();
var cantidad = $(this).closest('tr').find('td:eq(1)').text();
var comentario = $(this).closest('tr').find('td:eq(2)').text();
$("#pedido tbody > tr:has(td:eq(0):empty):first").find('td:eq(0)').text(cliente);
$("#pedido tbody > tr:has(td:eq(0):empty):first").find('td:eq(1)').text(cantidad);
$(this).parent().find('input[name=comentario]').val(comentario);
if (cantidad > 50) {
$(this).closest('td').find('input[name=Escoge]').attr('disabled', false);
$(this).closest('td').find('.custom-control-label').text('URGENTE');
} else {
$(this).closest('td').find('input[name=Escoge]').attr('disabled', true);
}
});
<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>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalFolio">
Listado de pedidos
</button>
<table id="pedido" class="table table-bordered text-center table-sm">
<thead>
<tr class="table-info">
<th width="5%">CLIENTE</th>
<th width="5%">Cantidad</th>
<th width="3%"> </th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td style="text-align: center; vertical-align: middle;">
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" name="Escoge" class="custom-control-input" id="1" disabled>
<input type="hidden" name="comentario">
<label class="custom-control-label" for="1"></label>
</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td style="text-align: center; vertical-align: middle;">
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" name="Escoge" class="custom-control-input" id="2" disabled>
<input type="hidden" name="comentario">
<label class="custom-control-label" for="2"></label>
</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td style="text-align: center; vertical-align: middle;">
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" name="Escoge" class="custom-control-input" id="3" disabled>
<input type="hidden" name="comentario">
<label class="custom-control-label" for="3"></label>
</div>
</td>
</tr>
</tbody>
</table>
<div class="modal fade" id="modalFolio" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="table-responsive text-nowrap">
<table class="table table-bordered table-hover" id="tbl_folio">
<thead>
<tr>
<th>Cliente</th>
<th>Cantidad</th>
<th>Comentario</th>
<th></th>
</tr>
</thead>
<tbody id="tbody_folio">
<tr>
<td>CL 1</td>
<td>10</td>
<td>Pedido 1</td>
<td>
<button class='btn btn-sm btn-warning replay' type='button' name='button'>
<i class='fas fa-chevron-circle-right'></i>agregar a pedido</button>
</td>
</tr>
<tr>
<td>CL 2</td>
<td>100</td>
<td>Pedido urgente</td>
<td>
<button class='btn btn-sm btn-warning replay' type='button' name='button'>
<i class='fas fa-chevron-circle-right'></i> agregar a pedido</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Salir</button>
</div>
</div>
</div>
</div>
How can I find these elements to make changes to them?
I consider that the method used in this problem is not very practical, for the code to work the following points were taken into account:
find()
by its name, it must be enclosed in quotation marks (name='Escoge'
).$(this)
used to move in the element in which the function is applied (in this case#tbl_folio
), its value is not replaced by the last element accessed (or anything like that).Some changes were made in the HTML code to show how the solution works, then jquery code can be used with the original HTML code of the problem and it will work the same way.
That way it works as expected, greetings.