jQuery - Target Table Cell in Same Row

Question

I have a table with a single input field and an AJAX script that runs when the input field value is modified. This is all working well. I now need to extend this to insert a date into another cell in the same row, but now sure how to target this as the ID will have to be dynamic. Here's the current table:

 <table class="table table-condensed table-striped table-bordered"> <thead> <th class="text-center" scope="col">Order Number</th> <th class="text-center" scope="col">Order Date</th> <th class="text-center" scope="col">Con Note</th> </thead> <tbody> <tr> <td>123456</td> <td id="85759.OrderDate"></td> <td id="85759"><input type="text" class="form-control" placeholder="Con Note" name="conNote" value=""></td> </tr> <tr> <td>987654</td> <td id="85760.OrderDate"></td> <td id="85760"><input type="text" class="form-control" placeholder="Con Note" name="conNote" value=""></td> </tr> </tbody> </table> 

I need to insert the current data into the Order Data cell when the AJAX script is run, something like this:

$("#85759.OrderDate").html('current date');

but not sure how to dynamically target the Order Data cell? I'm setting the ID for the Order Data cell to be the same ID as the input field with ".OrderDate" appended. Current script is:

 $(document).ready(function() { $("input[type='text']").change(function() { var recid = $(this).closest('td').attr('id'); var conNote = $(this).val(); $this = $(this); $.post('updateOrder.php', { type: 'updateOrder', recid: recid, conNote: conNote }, function(data) { data = JSON.parse(data); if (data.error) { var ajaxError = (data.text); var errorAlert = 'There was an error updating the Con Note Number - ' + ajaxError; $this.closest('td').addClass("has-error"); $("#serialNumberError").html(errorAlert); $("#serialNumberError").show(); return; // stop executing this function any further } else { $this.closest('td').addClass("has-success") $this.closest('td').removeClass("has-error"); } }).fail(function(xhr) { var httpStatus = (xhr.status); var ajaxError = 'There was an error updating the Con Note Number - AJAX request error. HTTP Status: ' + httpStatus; $this.closest('td').addClass("has-error"); //display AJAX error details $("#serialNumberError").html(ajaxError); $("#serialNumberError").show(); }); }); }); 

Answer 1

You can select the cell by $this.closest('tr').children('td[id$="OrderDate"]') .

You can simplify it more by:

• Instead of using attribute ends with selector ( [id$=".."] ), if you can, add a CSS class "OrderDate" for example to all the order date cells, and simplify the selector to $this.closest('tr').children('.OrderData')
• Instead of closest() use parents() . This is a micro-optimization. The only difference is that closest tests the actual element itself for matching the selector, and in this case you know you only need to check parent elements
• You can also optionally rely on the fact that the cells are siblings and instead of children use siblings like like $this.parents('td').siblings('.OrderDate')

Answer 2

You can get the parent element 'tr' and then find the 'td.OrderDate', I suggest you to use a class to identify the td in the context of its parent.

 $(function () { $("input[type='text']").change(function() { var parent = $(this).parents('tr'); // Get any element inside the tr $('td.OrderDate', parent).text('[current date]') }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>987654</td> <td id="85760.OrderDate" class="OrderDate"></td> <td id="85760"><input type="text" class="form-control" placeholder="Con Note" name="conNote" value=""></td> </tr> </table> 

Answer 3

Check the code below. I've removed the ajax call and replaced it with the success block, but the concept is still the same. It gets the cell that has an id that ends with "OrderDate" on the same row and sets the html for that cell. I've used the jQuery Ends With selector for this.

 $(document).ready(function() { $("input[type='text']").change(function() { var recid = $(this).closest('td').attr('id'); var conNote = $(this).val(); var $this = $(this); $this.parents('tr:first').find("td[id$='OrderDate']").html(new Date()); $this.closest('td').addClass("has-success") $this.closest('td').removeClass("has-error"); }); }); 

 .has-success { border: 1px solid green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-condensed table-striped table-bordered"> <thead> <th class="text-center" scope="col">Order Number</th> <th class="text-center" scope="col">Order Date</th> <th class="text-center" scope="col">Con Note</th> </thead> <tbody> <tr> <td>123456</td> <td id="85759.OrderDate"></td> <td id="85759"><input type="text" class="form-control" placeholder="Con Note" name="conNote" value=""></td> </tr> <tr> <td>987654</td> <td id="85760.OrderDate"></td> <td id="85760"><input type="text" class="form-control" placeholder="Con Note" name="conNote" value=""></td> </tr> </tbody> </table>