问题描述
我有一张桌子（父）和一张桌子（子）里面的另一张桌子。
我想从子表更新父表的单元格值。
<table id="example" class="table table-bordered table-striped mt-4 Nowrap" style="width:100%">
<thead>
<tr class="bg-primary text-light">
<th></th>
<th>
@Html.displayName("Restaurant Name")
</th>
<th>
@Html.displayName("Delivery Date")
</th>
<th>
@Html.displayName("Status")
</th>
<th class="none">
@Html.displayName("Preferred Delivery Date")
</th>
<th class="none">
<b> @Html.displayName("Item List") </b>
</th>
<th class="none"></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td></td>
<td>
@Html.displayFor(modelItem => item.RestaurantName)
</td>
<td>
@String.Format("{0:dd/MM/yyyy}",item.DELIVERED_DATE)
@*@Html.displayFor(modelItem => item.DELIVERED_DATE.Value.ToString("dd/MM/yyyy"))*@
</td>
<td>
@if (item.STATUS == 1)
{
<span class="badge badge-secondary">Draft</span>
}
@if (item.STATUS == 2)
{
<span class="badge badge-warning">Pending confirmation</span>
}
@if (item.STATUS == 3)
{
<span class="badge badge-primary">Confirmed</span>
}
@if (item.STATUS == 4)
{
<span class="badge badge-suceess">Delivered</span>
}
</td>
<td>
: @String.Format("{0:dd/MM/yyyy}",item.PREFERRED_DELIVERY_DATE)
</td>
<td>
:
<table>
<thead>
<tr class="bg-primary text-light">
<th>
@Html.displayName("Item Name")
</th>
<th>
@Html.displayName("Quantity")
</th>
<th>
@Html.displayName("Price")
</th>
</tr>
</thead>
<tbody>
<tr>
@foreach (var test in item.OrdersupplierItems)
{
<tr>
<td>@Html.displayFor(modelItem => test.IngredientName)</td>
<td>@Html.displayFor(modelItem => test.QUANTITY)</td>
<td>@Html.displayFor(modelItem => test.PRICE)$</td>
</tr>
}
<tr>
<td colspan="2">Sum</td>
<td>@item.OrdersupplierItems.Sum(b => b.PRICE)$</td>
</tr>
<tr>
</tbody>
</table>
</td>
<td>
<a class='Confirm btn btn-success' href='javascript:;@item.ID_ORDER_supplier'>CONFIRM</a>
<a class='btn btn-primary'>MAKE CHANGES</a>
</td>
</tr>
}
</tbody>
</table>我想更改 ajax 成功请求的状态。
$("body").on("click","#example TBODY .Confirm",function () {
if (confirm("Do you want to confirm this order?")) {
var row = $(this).closest("tr");
var ordersupplierId = $(this).attr('href').substr(12);
$.ajax({
type: "PUT",url: "@System.Configuration.ConfigurationManager.AppSettings["ServiceUrl"]/apI/Ordersupplier/" + ordersupplierId +"?status=3",contentType: 'application/json',// <---add this
dataType: 'text',success: function (response) {
//here i want to do this
},error: function (xhr,textStatus,errorThrown) {
console.log(errorThrown);
}
});
}我需要根据确认更改按钮更新父表的状态字段。 我需要替换当前表状态字段的当前文本。
解决方法
您可以使用 .closest() 从您所在的元素（即按钮）向后搜索。然后从那里找到状态字段。最好是给状态一个类或 id。所以：
$(this).closest('table').find('.status')
您可以使用 closest('tr').find("td:eq(3)") 这将指代表中的第 4 列 td，即：状态列并使用 .html 或 .text 在那里进行更改。
演示代码：
$("body").on("click",".Confirm",function() {
if (confirm("Do you want to confirm this order?")) {
var row = $(this); //declare this outside..ajax call
var orderSupplierId = $(this).attr('href').substr(12);
//ajaxcodes..
//success: function(response) {
//here i want to do this
row.closest('tr').find("td:eq(3)").html('<span class="badge badge-primary">Confirmed</span>')
//},//other codes
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<table id="example" class="table table-bordered table-striped mt-4 nowrap" style="width:100%">
<thead>
<tr class="bg-primary text-light">
<th></th>
<th>
Restaurant Name
</th>
<th>
Delivery Date
</th>
<th>
Status
</th>
<th class="none">
Preferred Delivery Date
</th>
<th class="none">
<b>Item List </b>
</th>
<th class="none"></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
Somehtings..
</td>
<td>
02/02/202
</td>
<td>
<span class="badge badge-warning">Pending confirmation</span>
</td>
<td>
02/3/2020
</td>
<td>
<table>
<thead>
<tr class="bg-primary text-light">
<th>
Item Name
</th>
<th>
Quantity
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>somehting</td>
<td>abc</td>
<td>12$</td>
</tr>
<tr>
<td colspan="2">Sum</td>
<td>123$</td>
</tr>
<tr>
</tbody>
</table>
</td>
<td>
<a class='Confirm btn btn-success' href='javascript:;@item.ID_ORDER_SUPPLIER'>CONFIRM</a>
<a class='btn btn-primary'>MAKE CHANGES</a>
</td>
</tr>
<tr>
<td></td>
<td>
Somehtings..
</td>
<td>
02/02/202
</td>
<td>
<span class="badge badge-success">Delivered</span>
</td>
<td>
02/3/2020
</td>
<td>
<table>
<thead>
<tr class="bg-primary text-light">
<th>
Item Name
</th>
<th>
Quantity
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>somehting</td>
<td>abc</td>
<td>12$</td>
</tr>
<tr>
<td colspan="2">Sum</td>
<td>123$</td>
</tr>
<tr>
</tbody>
</table>
</td>
<td>
<a class='Confirm btn btn-success' href='javascript:;@item.ID_ORDER_SUPPLIER'>CONFIRM</a>
<a class='btn btn-primary'>MAKE CHANGES</a>
</td>
</tr>
</tbody>
</table>