从 child table 更新 parent table 单元格值

Question

我有一个 table (parent) 和另一个 table 在里面 table(child).

我想从 child table 更新 parent table 的单元格值。

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

我需要根据确认更改按钮更新 parent table 的状态字段。我需要替换当前 table.

状态字段的当前文本

Answer 1

您可以使用 .closest() 从您所在的元素（即按钮）向后搜索。然后从那里找到状态字段。最好是给状态一个 class 或 id。所以：

$(this).closest('table').find('.status')

Answer 2

您可以使用 closest('tr').find("td:eq(3)") 这将引用您的 table 中的第 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>

从 child table 更新 parent table 单元格值

Update parent table cell value from child table

html

javascript

asp.net-mvc

jquery

asp.net-ajax