Question

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

＆＃13;

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

＆＃13;

我需要在运行AJAX脚本时将当前数据插入Order Data单元格，如下所示：

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

但不确定如何动态定位订单数据单元格？我将订单数据单元格的ID设置为与输入字段相同的ID，使用＆＃34; .OrderDate＆＃34;追加。目前的脚本是：

＆＃13;

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

＆＃13;

Answer 1

您可以按$this.closest('tr').children('td[id$="OrderDate"]')选择单元格。

您可以通过以下方式简化它：

如果可以的话，不是使用attribute ends with选择器（[id$=".."]），而是将CSS类“OrderDate”添加到所有订单日期单元格，并将选择器简化为$this.closest('tr').children('.OrderData')
而不是closest()使用parents()。这是一种微观优化。唯一的区别是closest测试实际元素本身以匹配选择器，在这种情况下，您知道您只需要检查父元素
您还可以选择依赖于单元格是兄弟姐妹的事实，而不是children使用siblings，例如$this.parents('td').siblings('.OrderDate')

Answer 2

您可以获取父元素＆＃39; tr＆＃39;然后找到＆td.OdderDate＆＃39;，我建议您使用一个类来识别其父级上下文中的td。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

检查以下代码。我已经删除了ajax调用并将其替换为成功块，但概念仍然相同。它获取的id具有以＆＃34; OrderDate＆＃34;结尾的id。在同一行并设置该单元格的html。我已经使用了jQuery Ends With selector。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery - 同一行中的目标表单元格

3 个答案: