jQuery腳本不更新表單輸入值

我有一個帶有 2 個文本輸入和 2 個非輸入單元格的簡單表格。我有一個腳本，該腳本在修改第一個輸入欄位時運行，該腳本查詢資料庫，然后更新同一行中的其他 3 個單元格。它目前只更新行中的最后 2 個非輸入單元格，而不是該行中的其他輸入欄位。

這是我的表/腳本的示例：

$(document).ready(function() {
  $("#addRow").click(function() {
    var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"productCode\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>";
    $("#shipmentItems").append(markup);
  });

  // Find and remove selected table rows

  $("#shipmentItems").on("click", ".deleteRow", function() {
    $(this).closest('tr').remove();
  });
});

$(document).ready(function() {
  $(document).on('change', '.form-control.serialNumber', function() {

    var serialNumber = $(this).val();
    //console.log( recid );
    // Create a reference to $(this) here:
    $this = $(this);

    ID = 'ABC123';
    code = 'PC8765';
    description = 'Acme Standard Widget';

    $this.closest('tr').children('.form-control.assetID').val(ID);
    $this.closest('tr').children('.code').html(code);
    $this.closest('tr').children('.description').html(description);

  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<table id="shipmentItems" class="table table-condensed table-striped table-bordered">
  <thead>
    <th class="text-center" scope="col" width="20%">Serial</th>
    <th class="text-center" scope="col" width="15%">ID</th>
    <th class="text-center" scope="col" width="15%">Code</th>
    <th class="text-center" scope="col" width="45%">Description</th>
    <th class="text-center" scope="col" width="5%"></th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control serialNumber" autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td>
      <td><input type="text" class="form-control assetID" autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td>
      <td class="code"></td>
      <td class="description"></td>
      <td class="deleteRow"><span class="glyphicon glyphicon-trash"></span></td>
    </tr>
  </tbody>
</table>

<button type="button" name="addRow" value="addRow" id="addRow" class="btn btn-primary">Add Asset</button> &nbsp; &nbsp;

我已經對本示例中要使用的變數進行了硬編碼，因此不存在沒有值來替換第二個輸入欄位的問題。出于某種原因，第二個輸入欄位沒有在這里更新。

uj5u.com熱心網友回復：

輸入不是 tr 的子項，它們是孫子項，因此$this.children()不選擇它們。使用.find()來代替。

$(document).ready(function() {
  $("#addRow").click(function() {
    var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"productCode\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>";
    $("#shipmentItems").append(markup);
  });

  // Find and remove selected table rows

  $("#shipmentItems").on("click", ".deleteRow", function() {
    $(this).closest('tr').remove();
  });
});

$(document).ready(function() {
  $(document).on('change', '.form-control.serialNumber', function() {

    var serialNumber = $(this).val();
    //console.log( recid );
    // Create a reference to $(this) here:
    $this = $(this);

    ID = 'ABC123';
    code = 'PC8765';
    description = 'Acme Standard Widget';

    $this.closest('tr').find('.form-control.assetID').val(ID);
    $this.closest('tr').children('.code').html(code);
    $this.closest('tr').children('.description').html(description);

  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<table id="shipmentItems" class="table table-condensed table-striped table-bordered">
  <thead>
    <th class="text-center" scope="col" width="20%">Serial</th>
    <th class="text-center" scope="col" width="15%">ID</th>
    <th class="text-center" scope="col" width="15%">Code</th>
    <th class="text-center" scope="col" width="45%">Description</th>
    <th class="text-center" scope="col" width="5%"></th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control serialNumber" autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td>
      <td><input type="text" class="form-control assetID" autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td>
      <td class="code"></td>
      <td class="description"></td>
      <td class="deleteRow"><span class="glyphicon glyphicon-trash"></span></td>
    </tr>
  </tbody>
</table>

<button type="button" name="addRow" value="addRow" id="addRow" class="btn btn-primary">Add Asset</button> &nbsp; &nbsp;

標籤：javascript 查询

上一篇：SpringMongoDB只獲取值而不是鍵：結果中的值

下一篇：將滑鼠懸停在元素上以激活子元素以單擊？