I have a simple table with 2 text inputs and 2 non input cells. I have a script that runs when the first input field is modified which queries a database and then updates the other 3 cells in the same row. It is currently only updating the last 2 non input cells in the row and not the other input field in that row.

Here's an example of my table/scripts:

$(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" >
  <thead>
    <th  scope="col" width="20%">Serial</th>
    <th  scope="col" width="15%">ID</th>
    <th  scope="col" width="15%">Code</th>
    <th  scope="col" width="45%">Description</th>
    <th  scope="col" width="5%"></th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text"  autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td>
      <td><input type="text"  autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td>
      <td ></td>
      <td ></td>
      <td ><span ></span></td>
    </tr>
  </tbody>
</table>

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

I've hardcoded the variables to be used in this example so there's no issue of there not being a value to replace for the 2nd input field. For some reason the 2nd input field is not updating here.

CodePudding user response：

The inputs are not children of the tr, they're grandchildren, so $this.children() doesn't select them. Use .find() instead.

$(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" >
  <thead>
    <th  scope="col" width="20%">Serial</th>
    <th  scope="col" width="15%">ID</th>
    <th  scope="col" width="15%">Code</th>
    <th  scope="col" width="45%">Description</th>
    <th  scope="col" width="5%"></th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text"  autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td>
      <td><input type="text"  autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td>
      <td ></td>
      <td ></td>
      <td ><span ></span></td>
    </tr>
  </tbody>
</table>

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