javascript - 如何使用类选择器和 jquery 库调用表中输入元素中的某些值？

Question

我无法通过使用 siblings() 和 Jquery 从表 HTML 标记中的输入调用值来计算并将结果发送到结果选择器.

这个原因可能来自 Siblings() 方法，但我不知道应该使用哪个方法来使用类选择器从表中选择值。

这里是HTML标签

<table class="table table-condensed">
     <thead>
         <tr>
             <td><strong>No</strong></td>
             <td><strong>DESCRIPTION</strong></td>
             <td><strong>Type</strong></td>
             <td><strong>QUANTITY</strong></td>
             <td><strong>UNIT PRICE</strong></td>
             <td><strong>AMOUNT (USD)</strong></td>
         </tr>
     </thead> 
<tbody>
<tr>
 <td><div><?php echo form_input('vat',set_value('',''), 'class="qty"')?> </div></td> 
 <td><div><?php echo form_input('vat',set_value('',''), 'class="unit"')?> </div></td> 
 <td><div><?php echo form_input('vat',set_value('',''), 'class="amount" readonly')?></div></td> 
                                 </tr>
 <tr> 
 <td><div><?php echo form_input('vat',set_value('',''), 'class="qty"')?></div></td> 
 <td><div><?php echo form_input('vat',set_value('',''), 'class="unit"')?> </div></td>
 <td><div><?php echo form_input('vat',set_value('',''), 'class="amount" readonly')?></div></td>
                                </tr>         
 <tr> 
 <td><div>Total</div></td>
 <td> <div><?php echo form_input('total',set_value('total',''),'class="result" readonly ')?>$</div></td>
 </tr> 

这是使用 Jquery 库的 Javascript，我尝试使用类选择器从表元素的输入中选择一些值，如果我不使用表，我也会为我工作。

$(function () {

    $('.unit,.qty').on('change', function () {
    var unit = $(this).hasClass('unit') ? $(this).val() : $(this).siblings('.unit').val();
    var qty = $(this).hasClass('qty') ? $(this).val() : $(this).siblings('.qty').val();
    unit = unit || 0;
    qty   = qty || 0;
    var val = unit >= 1 && qty >= 1 ? parseFloat(unit * qty) : 0;
    $(this).siblings('.amount').val(val);//parent()
    var total = 0;
    var update = false;
    $('.amount').each(function () {
        val = parseFloat($(this).val()) | 0;
        total = val ? (parseFloat(total + val)) : total;
    });
    $('.result').val(total);
  });
});

</script> 

我该怎么做请帮忙>

Answer 1

您可以使用最近的行，例如

$(function () {
    $('.unit,.qty').on('change', function () {
        var $tr=$(this).closest('tr'); // usae the parent row to achieve this
        var unit = $tr.find('.unit').val();
        var qty = $tr.find('.qty').val();
        unit = unit || 0;
        qty   = qty || 0;
        var val = unit >= 1 && qty >= 1 ? parseFloat(unit * qty) : 0;
        $tr.find('.amount').val(val);//parent()
        var total = 0;
        var update = false;
        $('.amount').each(function () {
            val = parseFloat($(this).val()) | 0;
            total = val ? (parseFloat(total + val)) : total;
        });
        $('.result').val(total);
    });
});