javascript - 不允许用户向 HTML 表添加重复值

Question

我需要防止用户在单击“添加行”按钮时根据表中提到的月份向 HTML 表添加重复值。我尝试使用以下方法，但在检查重复值时它总是会跳过第一行。该图显示了我在重复时遇到的错误。

我尝试过的方法。

<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>