0
我有一個日期輸入字段的HTML表，當日期修改時，它當前運行AJAX腳本。這是行之有效的，但我現在需要腳本的另一個版本作用於頁面上的所有錶行，以便用戶不必輸入每個錶行的日期（頁面上可能有20個）。爲所有錶行ID運行的腳本
我已經創建了另一個輸入來標記所有的行，但難倒如何實現這一點。理想情況下，我希望將一組表格ID（例如id="61851"）傳遞給一個新腳本，該腳本調用一個處理後端更新的PHP腳本。
這裏是我的表：
<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>，這裏是當你修改單個日期的最後一列運行當前的腳本：
$(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();
});
});
});我已經添加了收到全部日期按鈕和單獨的輸入字段以捕獲所有項目收到的日期，只是不知道如何讓該按鈕觸發當前JS的類似版本，但這次傳遞所有ID的數組？
我需要通過所有的錶行ID - 在上面的例子中，這將是61851,61852和61853.不知道你的例子如何解決這個問題？ – user982124
你有試過嗎？ –