javascript - 检查特定行是否存在

Question

我试图在表上动态创建行。当在自动完成中找到名称时，它将使用现有表创建行。但我的问题是我不想连续添加相同的产品。这里<tr></tr> id 是唯一的。如何避免在表中添加相同的产品？

<table class="table m-table ">
   <thead>
     <tr> 
       <th></th>                   
       <th>Product Name</th>
       <th>Unit Price</th>
       <th>Quantity</th>                   
       <th>Total </th>
     </tr>
    </thead>
      <tbody>
     </tbody>
 </table>   

 $('#productSearch').autocomplete({
    source: '{!! asset('productSearch') !!}',
    select:function(suggestion, ui) {
      {
        var markup = "<tr id="+ui.item.id+"><td><i class='flaticon-delete-1 delete-row' onclick='deleteRow(this)'></i></td><td>"+ui.item.value+"</td><td>"+ui.item.unit_price+"</td><td><input type='text' class='quantity' value='1'></td><td class='total'>"+ui.item.unit_price+"</td></tr>"; 
        $("table tbody").append(markup);           
      }           
    }
 })

Answer 1

要实现这一点，您可以检查具有该 id 的元素是否已存在于 DOM 中，方法是选择它并检查生成的 jQuery 对象的 length 属性，如下所示:

$('#productSearch').autocomplete({
  source: '{!! asset('productSearch') !!}',
  select: function(suggestion, ui) {
    if ($('#' + ui.item.id).length !== 0) 
      return;

    var markup = '<tr id="' + ui.item.id + '"><td><i class="flaticon-delete-1 delete-row" onclick="deleteRow(this)"></i></td><td>' + ui.item.value + '</td><td>' + ui.item.unit_price + '</td><td><input type="text" class="quantity" value="1"></td><td class="total">' + ui.item.unit_price + '</td></tr>';
    $('table tbody').append(markup);
  }
});