根据前两个列的值检查html表中的重复项

Question

我有一个要求，我需要检查html表中的重复数据。 我有两列产品名称和批次。 根据要求，产品名称可以重复，但是如果相同的产品名称重复相同的批次，我需要在警报中显示一个具有相应批次和产品名称的警报。 我在下面创建了一个片段，该片段更恰当地表示了该问题。

下表包含两行具有相同产品名称和批次的行，我要为其显示警报。

请帮我！

 function highlightDuplicates() { a1 =0; a2 =0; $('#myTable .tbody tr').find('input').each(function() { // check if there is another one with the same value if ($('#myTable td:nth-child(1)').find('input[value="' + $(this).val() + '"]').size() > 1 && $('#myTable td:nth-child(2)').find('input[value="' + $(this).val() + '"]').size() > 1) { alert("Duplicate found") return false; } }); } 

 table { border-collapse: collapse; width: 100%; } th { background-color: #009999; color: black; } th,td{ padding:0.8em; border: 1px solid; } th{ background-color:#6699FF; font-weight:bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="myTable"> <thead> <tr> <th>Product Name</th> <th>Batch</th> <tr> </thead> <tbody class="tbody"> <tr> <td><input type="text" value="a"></td><td><input type="text" value="b"></td> </tr> <tr> <td><input type="text" value="c"></td><td><input type="text" value="d"></td> </tr> <tr> <td><input type="text" value="a"></td><td><input type="text" value="b"></td> </tr> </tbody> </table> <br> <button onclick="return highlightDuplicates()">Check Duplicates</button> 

Answer 1

您可以通过这种方式跟踪值并检查它们

function highlightDuplicates() {
  var currentValues = [];

  $('#myTable .tbody tr').find('input').each(function() {
   // check if there is another one with the same value
     if (currentValues.includes($(this).val())) {
         alert("Duplicate found");
         return false;
     }

     currentValues.push($(this).val());
  }

}

Answer 2

您可以尝试如下操作：

 function highlightDuplicates() { $('#myTable .tbody tr').each(function(index1){ var row = $(this) var row_val1 = row.find("td:nth-child(1) input").val() var row_val2 = row.find("td:nth-child(2) input").val() $('#myTable .tbody tr').each(function(index2){ var compare_row = $(this) var compare_row_val1 = compare_row.find("td:nth-child(1) input").val() var compare_row_val2 = compare_row.find("td:nth-child(2) input").val() if(index1!=index2 && row_val1==compare_row_val1 && row_val2==compare_row_val2){ row.addClass('duplicate') compare_row.addClass('duplicate') } }) }) if($('tr.duplicate').length>0){ alert('Duplicates found') } } 

 table { border-collapse: collapse; width: 100%; } th { background-color: #009999; color: black; } th,td{ padding:0.8em; border: 1px solid; } th{ background-color:#6699FF; font-weight:bold; } tr.duplicate td{ background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="myTable"> <thead> <tr> <th>Product Name</th> <th>Batch</th> <tr> </thead> <tbody class="tbody"> <tr> <td><input type="text" value="a"></td><td><input type="text" value="b"></td> </tr> <tr> <td><input type="text" value="c"></td><td><input type="text" value="d"></td> </tr> <tr> <td><input type="text" value="a"></td><td><input type="text" value="b"></td> </tr> </tbody> </table> <br> <button onclick="return highlightDuplicates()">Check Duplicates</button> 

Answer 3

我会这样处理：

https://jsfiddle.net/bgd7mL3r/

$('#highlightDuplicatesBtn').on('click', function() {

  var uniqueItems = [];
  var duplicates = [];

  $('.productInput').each(function() {
    var batchInput = $('.batchInput', $(this).parent().parent());
    var item = 'Product: ' + $(this).val() + ', Batch: ' + batchInput.val();

    if (uniqueItems.indexOf(item) != -1) {
      duplicates.push(item);
      alert('Duplicates' + item);
    }
    uniqueItems.push(item);
  });

  console.log(duplicates);
}), false;

在标记中进行一些细微更改：

<table id="myTable">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Batch</th>
      <tr>
  </thead>
  <tbody class="tbody">
    <tr>
      <td>
        <input type="text" value="a" class="productInput">
      </td>
      <td>
        <input type="text" value="b" class="batchInput">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" value="c" class="productInput">
      </td>
      <td>
        <input type="text" value="d" class="batchInput">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" value="a" class="productInput">
      </td>
      <td>
        <input type="text" value="b" class="batchInput">
      </td>
    </tr>
  </tbody>
</table>

<br>
<button id="highlightDuplicatesBtn">Check Duplicates</button>