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

输入字段不应该有一个结尾，它们应该如下所示：

<input type="text" value="" class="">

我给你写了一个例子，说明当你改变一个输入以比较重复时，你可以通过迭代所有其他字段来实现这一点。

Codepen

Answer 2

当输入change（优于keyup时，因为如果第一个条形码为1，那么对于每个以alert开头的输入，它将1 ），从其他输入中获取所有值（使用map）并检查当前值是否等于其中任何一个。

＆＃13;

$('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');
  }
});

＆＃13;

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

＆＃13;

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

Answer 3

$('table').on("keyup", "tr td input[id^='barcode']:not([id^='barcodedb'])", function() {
  var ThisIs = $(this);
  var barcode = $(this).val().trim();
  $("input[id^='barcode']:not([id^='barcodedb'])").not($(this)).each(function(){
    if(barcode == $(this).val().trim()){
      console.log('Duplicated with ' + $(this).attr('id'));
    }
  });
});

<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="barcode0" class="hide" type="text" /></td>
  </tr>
  <tr>
    <td>abc</td>
    <td>781</td>
    <td><input id="barcodedb1" class="hide" type="text" /><input id="barcode1" class="hide" type="text" /></td>
  </tr>
</table>

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

3 个答案: