Не разрешать пользователям добавлять повторяющиеся значения в таблицу HTML

Question

Мне нужно запретить пользователям добавлять дублирующиеся значения в HTML таблицу, основанную на месяце, указанном в таблице, при нажатии кнопки добавления строки. Я попытался с помощью метода Follow, но он всегда пропускает первую строку при проверке повторяющихся значений. Изображение показывает ошибку, которую я получаю с дубликатами.

Метод, который я попробовал.

<select  id="month"  class="form-control">
  <option value="Jan">Jan</option>
  <option value="Feb">Feb</option>
  <option value="March">March</option>
  <option value="April">April</option>
</select>

<input type="number" id="amt5" />

<input type="button" class="btn" value="Add Row" onclick="ftm2add5()">

<table id="table5" class="table table-dark" border="1">
    <thead>
        <tr>
            <th scope="col">Select</th>
            <th scope="col">Month</th>
            <th scope="col">T/O Value</th>
            <th scope="col" style="display:none;">TORef</th>
        </tr>
    </thead>
    <tbody>
        <tr>

        </tr>
    </tbody>
</table>


function ftm2add5() {
  var cat = $("#month").val();
  var amt = $("#amt5").val();

  var cate = $("#month option:selected").html();

  if (amt == "") {
    $("#amt5").addClass("red-border");
  } else {
    var allCells = $("#table5 tr td:nth-child(2)");
    var textMapping = {};
    allCells.each(function() {
      textMapping[$(this).text()] = true;
    });

    var count = 0;
    for (var text in textMapping) count++;

    if (count !== allCells.length) {
      alert("found duplicate values");
    } else {
      var markup =
        "<tr><td><input type='checkbox' name='record'></td><td>" +
        cate +
        "</td><td style='display:none;'>" +
        cat +
        "</td><td>" +
        amt +
        "</td></tr>";
      $("#table5 tbody").append(markup);
    }
  }
}

Answer 1

Просто с помощью селектора jquery:

$('#table5 tr:contains("' + cat +'")').length

function ftm2add5() {
  var cat = $("#month").val();
  var amt = $("#amt5").val();
  
  var cate = $("#month option:selected").html();

  if (amt == "") {
    $("#amt5").addClass("red-border");
  } else {
    
    if ($('#table5 tr:contains("' + cat +'")').length > 0) {
      alert("found duplicate values");
    } else {
      var markup =
        "<tr><td><input type='checkbox' name='record'></td><td>" +
        cate +
        "</td><td style='display:none;'>" +
        cat +
        "</td><td>" +
        amt +
        "</td></tr>";
      $("#table5 tbody").append(markup);
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  id="month"  class="form-control">
  <option value="Jan">Jan</option>
  <option value="Feb">Feb</option>
  <option value="March">March</option>
  <option value="April">April</option>
</select>

<input type="number" id="amt5" />

<input type="button" class="btn" value="Add Row" onclick="ftm2add5()">

<table id="table5" class="table table-dark" border="1">
    <thead>
        <tr>
            <th scope="col">Select</th>
            <th scope="col">Month</th>
            <th scope="col">T/O Value</th>
            <th scope="col" style="display:none;">TORef</th>
        </tr>
    </thead>
    <tbody>
        <tr>

        </tr>
    </tbody>
</table>