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>

根据前两列值

3 个答案: