jQuery 腳本未更新表單輸入值

Question

我有一個帶有 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;

我已經硬編碼了要在此示例中使用的變量，因此不存在沒有用於替換第二個輸入字段的值的問題。 由於某種原因，第二個輸入字段未在此處更新。

Answer 1

輸入不是 tr 的孩子，它們是孫子，所以$this.children()不是 select 它們。 使用.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;