Question

嗨，我正在学习编码jQuery。如果该条目与另一个APPENDED行重复，该如何禁用或可能发出警报？

这是我的追加行脚本

var rowCount = 1;

$('#add').click(function() {
    rowCount++;
    $('#orders').append('<tr id="row'+rowCount+'"><td><input class="form-control autocomplete_txt product_code" type="text" data-type="product_code" id="product_code_'+rowCount+'" name="product_code[]" for="'+rowCount+'" required/></td><td><input class="form-control autocomplete_txt" type="text" data-type="product_name" id="product_name_'+rowCount+'" name="product_name[]" for="'+rowCount+'"required/></td><td><input class="form-control product_price" type="number" data-type="product_price" id="product_price_'+rowCount+'" name="price[]" for="'+rowCount+'" required/></td><td><input class="form-control quantity" type="number" class="quantity" id="quantity_'+rowCount+'" name="quantity[]" for="'+rowCount+'" required/><span id="quantity_warning_'+rowCount+'"></span> </td><td><input class="form-control total_price" type="text" id="total_price_'+rowCount+'" name="total_price[]"  for="'+rowCount+'" readonly required/> <input class="form-control" type="hidden" data-type="product_id" id="product_id_'+rowCount+'" name="product_id[]"/><input class="form-control" type="hidden" data-type="order_id" id="order_id_'+rowCount+'" name="order_id[]" value="1"/></td><td><button type="button" name="remove" id="'+rowCount+'" class="btn btn-danger btn_remove cicle"><i class="fas fa-times-circle"></i></button></td></tr>');
});

这是表格的屏幕截图

更新

<div class="col-md-12">
  <div class="line line-dashed line-lg pull-in"></div>
  <div class="row">
    <h5><small class="text-danger"><em><strong>Type the first letter</strong> of the product code and in product name and wait for the dropdown to appear</em></small></h5>
    <table class="table table-bordered" id="orders">
      <tr>
        <th>Product Code</th>
        <th>Product name</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Total Price </th>
        <th><a href="#" onclick="calculateSubTotal()" type="button" class="btn btn-sm btn-dark btn-icon" data-toggle="tooltip" title="Recalculate"><i class="fas fa-calculator"></i></a></th>
      </tr>
      <tr>
        <td><input class="form-control autocomplete_txt product_code" type='text' data-type="product_code" id='product_code_1' name='product_code[]' for="1" required/></td>
        <td><input class="form-control autocomplete_txt" type='text' data-type="product_name" id='product_name_1' name='product_name[]' for="1" required/></td>
        <td><input class="form-control product_price" type='number' data-type="product_price" id='product_price_1' name='price[]' for="1" required/></td> <!-- purchase_cost -->
        <td><input class="form-control quantity" type='number' id='quantity_1' name='quantity[]' min="1" for="1" required/><span id="quantity_warning_1"></span></td>
        <td><input class="form-control total_price" type='text' id='total_price_1' name='total_price[]' for='1' readonly required/>
          <input class="form-control product_id" type='hidden' data-type="product_id" id='product_id_1' name='product_id[]'/>
          <input class="form-control product_id" type='hidden' data-type="order_id" id='oder_id_1' name='order_id[]' value="1" /></td>
        <td><button type="button" name="add" id="add" class="btn btn-success circle"><i class="fas fa-plus-circle"></i></button></td>
      </tr>
    </table>

    {{-- hidden inputs --}}
    <input class="form-control" type='hidden' id='user_id' name='user_id' value='{{ auth()->user()->id }}' /> 
    <input class="form-control" type='hidden' id='publish' name='publish' value='0'/>
    <input class="form-control" type='hidden' id='status_id' name='status_id' value='1'/>

  </div>
</div>

第二次更新 这是负责将产品添加到我的表中的jquery自动完成脚本。

<script type="text/javascript">
//autocomplete script
$(document).on('focus','.autocomplete_txt',function(){
  type = $(this).data('type');

  if(type =='product_code' )autoType='product_code'; 
  if(type =='product_name' )autoType='name'; 
  if(type =='product_price' )autoType='price'; 
  if(type =='quantity' )autoType='quantity'; 
  if(type =='product_id' )autoType='id'; 

   $(this).autocomplete({
       minLength: 0,
       source: function( request, response ) {
            $.ajax({
                url: "{{ route('searchaSaleItems') }}",
                dataType: "json",
                data: {
                    term : request.term,
                    type : type,
                },
                success: function(data) {
                    var array = $.map(data, function (item) {
                       return {
                           label: item[autoType],
                           value: item[autoType],
                           data : item
                       }
                    });
                    response(array)
                }
            });
       },
       select: function( event, ui ) {
            var data = ui.item.data;
            var arr = []; 
            id_arr = $(this).attr('id');
            id = id_arr.split("_");
            elementId = id[id.length-1];

            $('.product_code').val(data.product_code).each(function() {
              arr.push($(this).val());
            });
            $('#product_code_'+elementId).val(data.product_code);
            $('#product_name_'+elementId).val(data.name);
            $('#product_price_'+elementId).val(data.price).prop('min', data.price);
            $('#product_id_'+elementId).val(data.id);
            $('#quantity_'+elementId).prop('max', data.quantity);
            $('#quantity_warning_'+elementId).text('You have '+data.quantity+' in your stocks');
       }
   });
});
</script>

第3次更新（问题已解决）

只分享@chennighan的调整后答案

    select: function( event, ui ) {
      var data = ui.item.data; 
      var arr = []; 

      id_arr = $(this).attr('id');
      id = id_arr.split("_");
      elementId = id[id.length-1];

      $('.product_code').each(function() {
        arr.push($(this).val());
      });

      // added logic to check if there are duplicates in the array we just populated with product codes, checked against the passed in product code 
      if(arr.includes(data.product_code)) {
          $('#quantity_warning_'+elementId).text('duplicated');
      } else {
        $('#product_code_'+elementId).val(data.product_code);
        $('#product_name_'+elementId).val(data.name);
        $('#product_price_'+elementId).val(data.price).prop('min', data.price);
        $('#product_id_'+elementId).val(data.id);
        $('#quantity_'+elementId).prop('max', data.quantity);
        $('#quantity_warning_'+elementId).text('You have '+data.quantity+' in your stocks');
      }
    }

非常感谢您！

Answer 1

您可以使用普通的旧JavaScript数组进行此操作。添加行时，请根据需要的触发器使用以下逻辑检查是否存在重复项。如果没有重复项，并且您可以使用产品代码添加产品，则可以将其添加到productCodes数组中。如果需要使其在页面加载期间保持不变，则可以通过将Web Storage保存到local或session存储中来加以利用。

// initially defined array to hold the product codes (can be toward the top of your javascript where constants and other top level vars are declared)
var productCodes = [];

/* 
    - when the trigger you're using is triggered to add the product code
        - you get the product code associated with what you've added
        - you call the isDuplicateProductCode function with that product code

*/

function isDuplicateProductCode(code) {
    // apply any other checking logic you need here

    // jQuery array method to check if the code passed to the function is in the productCodes array
    return productCodes.includes(code);
}

如果是重复的产品代码（如上述功能所示），则可以应用所需的任何逻辑，例如：显示警报，弹出模式，显示错误/警告文本，必须使用其他代码

更新：

如果您已经在迭代产品代码并将它们添加到数组中，则应该只能够添加以上逻辑来检查是否存在重复项，如果存在重复项，则不要运行附加逻辑。如果没有重复，请照常营业。

更新2：

您可以在循环下面添加此逻辑，以检查是否存在重复项，如果没有，则仅附加项。

select: function( event, ui ) {
    var data = ui.item.data;
    var arr = []; 
    id_arr = $(this).attr('id');
    id = id_arr.split("_");
    elementId = id[id.length-1];

    $('.product_code').val(data.product_code).each(function() {
      arr.push($(this).val());
    });

    // added logic to check if there are duplicates in the array we just populated with product codes, checked against the passed in product code 
    if(arr.includes(data.product_code) {
        // at this point, this is a duplicate product code and you need to display your warning/alert/modal/text (whatever type you want)
    } else {
        // this logic is not executed because the product code is a duplicate
        $('#product_code_'+elementId).val(data.product_code);
        $('#product_name_'+elementId).val(data.name);
        $('#product_price_'+elementId).val(data.price).prop('min', data.price);
        $('#product_id_'+elementId).val(data.id);
        $('#quantity_'+elementId).prop('max', data.quantity);
        $('#quantity_warning_'+elementId).text('You have '+data.quantity+' in your stocks');
    }
}

如果jQuery中存在重复项，请禁用“添加”按钮

1 个答案:

更新：

更新2：