Question

我有一个带有日期输入字段的HTML表，当前日期被修改时，该字段会运行AJAX脚本。这很好用，但我现在需要另一个版本的脚本作用于页面上的所有表行，以防止用户输入每个表行的日期（页面上可能有20个）。

我已经创建了另一个用于标记所有行的输入，但却对如何实现这一行感到困惑。理想情况下，我希望将表行ID（例如id="61851"）的数组传递给新脚本，该脚本调用处理后端更新的PHP脚本。

这是我的表：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.uk.min.js"></script>
<div class="col-md-8">
  <h1>Items List</h1>

  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

  <div class="col-md-6">
    <table class="table table-bordered">
      <tr>
        <td>Flag All Received:</td>
        <td><input type="text" class="form-control datepicker" name="dateReceivedAll" id="dateReceivedAll" data-date-format="dd/mm/yyyy" placeholder="Date Received"></td>
        <td class="text-center">
          <button type="submit" class="btn btn-success">Date Received All</button>
        </td>
      </tr>
    </table>

  </div>
  <!-- /.col-md-6-->

  <div class="col-md-6">
  </div>
  <!-- /.col-md-6-->



</div>
<!-- /.col-md-8-->


<div class="col-md-4">



</div>
<!-- /.col-md-4-->

</div>
<!-- /.row-->


<div>

  <br />
  <table class="table table-condensed table-striped table-bordered">
    <thead>
      <th class="text-center" scope="col">Item Tag</th>
      <th class="text-center" scope="col">Serial Number</th>
      <th class="text-center" scope="col">Received Date</th>
    </thead>
    <tbody>

      <tr id="61851">
        <td>61851</td>
        <td>DTZ452432DDF</td>
        <td id="61851"><input type="text" id="61851" class="form-control datepicker" autocomplete="off" placeholder="Date Rec'd" data-date-format="dd/mm/yyyy" name="dateReceived" value=""></td>
      </tr>
      <tr id="61852">
        <td>61852</td>
        <td>GZF2452542DA</td>
        <td id="61852"><input type="text" id="61852" class="form-control datepicker" autocomplete="off" placeholder="Date Rec'd" data-date-format="dd/mm/yyyy" name="dateReceived" value=""></td>
      </tr>
      <tr id="61853">
        <td>61853</td>
        <td>TRA3241234ZZ</td>
        <td id="61853"><input type="text" id="61853" class="form-control datepicker" autocomplete="off" placeholder="Date Rec'd" data-date-format="dd/mm/yyyy" name="dateReceived" value=""></td>
      </tr>
    </tbody>
  </table>

</div>

＆＃13;

这里是修改最后一列中单个日期时运行的当前脚本：

＆＃13;

$(document).ready(function() {
  $(".form-control.datepicker").change(function() {
    var recid = $(this).closest('td').attr('id');
    var dateReceived = $(this).val();
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('updateItem.php', {
      recid: recid,
      dateReceived: dateReceived
    }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        var ajaxError = (data.text);
        var errorAlert = 'There was an error updating the Date Received - ' + ajaxError + '. Please contact the Help Desk';
        $this.closest('td').addClass("has-error");
        $("#dateReceivedErrorMessage").html(errorAlert);
        $("#dateReceivedError").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 Date Received - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact the Help Desk';
      $this.closest('td').addClass("has-error");
      $("#dateReceivedErrorMessage").html(ajaxError);
      $("#dateReceivedError").show();
    });
  });
});

＆＃13;

我已经添加了Date Received All按钮和单独的输入字段来捕获所有项目被收到的日期，只是不知道如何让该按钮触发当前JS的类似版本，但这次传递了一个数组所有的id？

Answer 1

根据以下方法更改您的change event初始化事件。

 
  $(document).on("change",".form-control.datepicker",function(){
    var recid = $(this).closest('td').attr('id');
    var dateReceived = $(this).val();
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('updateItem.php', {
      recid: recid,
      dateReceived: dateReceived
    }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        var ajaxError = (data.text);
        var errorAlert = 'There was an error updating the Date Received - ' + ajaxError + '. Please contact the Help Desk';
        $this.closest('td').addClass("has-error");
        $("#dateReceivedErrorMessage").html(errorAlert);
        $("#dateReceivedError").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 Date Received - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact the Help Desk';
      $this.closest('td').addClass("has-error");
      $("#dateReceivedErrorMessage").html(ajaxError);
      $("#dateReceivedError").show();
    });
  });

Answer 2

$('#sucess-btn').click(function(){
    var ans = $('.table-condensed>tbody>tr').map(function(c,i,a){
        return $(i).attr('id');
  });
  //ans is an array with numbers
});

将此添加到您的点击事件中，ans数组将包含表格行的ID。向表和按钮添加ID，从DOM中选择元素将更容易。

要为所有表行ID运行的脚本

2 个答案: