根據前兩個列的值檢查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>