我有以下代码,从模式中我将订单添加到表中,其想法是检测第一个空行并向其添加数据。向该行输入数据时,您必须找到<input type="hidden">
分配一个值,<checkbox>
如果金额大于 ,还启用该行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>
我怎样才能找到这些元素来对它们进行更改?
我认为在这个问题中使用的方法不是很实用,为了使代码工作,考虑了以下几点:
find()
,必须将其括在引号 (name='Escoge'
) 中。$(this)
用于在应用函数的元素中移动(在这种情况下#tbl_folio
),它的值不会被最后访问的元素(或类似的东西)替换。在 HTML 代码中进行了一些更改以显示解决方案的工作原理,然后 jquery 代码可以与问题的原始 HTML 代码一起使用,并且将以相同的方式工作。
这样它就可以按预期工作,问候。