javascript - 如何使 html 表中存在的文本框值唯一？

Question

我有一个 html 表，其中包含如下数据

<table>
  <tr>
    <td>abc</td>
    <td>781</td>
    <td><input id="barcodedb0" class="hide" type="text" /><input id="barcode0" class="hide" type="text" /></td>
  </tr>
  <tr>
    <td>abc</td>
    <td>781</td>
    <td><input id="barcodedb0" class="hide" type="text" /><input id="barcode0" class="hide" type="text" /></td>
  </tr>
</table>

在 jQuery 中

$('#library_info_tbl tbody').on("keyup", "tr td input:nth-child(2)", function() {
  var j = $(this).closest('tr').index();
  var barcode = $("#barcode" + j).val().trim();
  var barcodeexisting = $("#barcode" + j - 1).val().trim();
  if (barcode == barcodeexisting)
    // do something
});

我正在尝试调整上面的代码，以检查用户输入的条形码是否不应与 html 表中其他输入的文本相同。我不知道该怎么做。

请帮忙!!!

Answer 1

当输入改变时(比keyup更好，因为如果第一个条形码是1，那么它会警报对于以 1 开头的每个输入)，从其他输入获取所有值(使用 map )并检查当前值是否等于其中任何一个。

$('input').on('change', function() {
  var $this = $(this),
      val = $this.val();
      
  var barcodes = $('input').not($this).map(function() {
    return $(this).val();
  }).get();
  
  if (barcodes.indexOf(val) > -1) {
    alert('duplicate');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>abc</td>
    <td>781</td>
    <td><input id="barcodedb0" class="hide" type="text" /><input id="barcode1" class="hide" type="text" /></td>
  </tr>
  <tr>
    <td>abc</td>
    <td>781</td>
    <td><input id="barcodedb2" class="hide" type="text" /><input id="barcode3" class="hide" type="text" /></td>
  </tr>
</table>

顺便说一句，id必须是唯一的..