在同一行的jQuery目标表单元。

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:

我有一个具有单个输入字段的表，以及一个在修改输入字段值时运行的AJAX脚本。这一切都运行良好。我现在需要扩展它，将日期插入到同一行中的另一个单元格中，但是现在要确定如何将其作为目标，因为ID必须是动态的。当前表:

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

当AJAX脚本运行时，我需要将当前数据插入到订单数据单元中，如下所示:

$("#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:

但不确定如何动态地锁定订单数据单元?我将Order数据单元格的ID设置为与输入字段相同的ID。向“附加。当前脚本:

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

3 个解决方案

#1

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.

检查下面的代码。我已经删除了ajax调用，并将其替换为success块，但是概念仍然是相同的。它获取在同一行中以“OrderDate”结尾的id的单元格，并为该单元格设置html。我使用了jQuery结尾的选择器。

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

#2

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

您可以通过$this. nearest ('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')
• 不要使用以selector ([id$=". "]结尾的属性，如果可以，可以将CSS类“OrderDate”添加到所有订单日期单元格中，并将选择器简化为$this. nearest ('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
• 使用parents()而不是最近的()。这是一个优化上。惟一的区别是，最接近的测试实际元素本身来匹配选择器，在这种情况下，您只需要检查父元素。
• 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')
• 您还可以选择依赖这样的事实，即细胞是兄弟姐妹，而不是像$this.parents('td').sibling ('.OrderDate')

#3

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.

您可以得到父元素“tr”，然后找到“td”。OrderDate'，我建议您使用一个类在td的父上下文中标识td。

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