javascript - 从数据表中的子项获取父行

Question

从数据表中一行的子行中的一行中，我如何找到对数据表中父行的访问。基本上，我想在单击展开后的子行时突出显示父行。

我给所有 parentRows 一个类名，当点击子行中的按钮时，我这样做了:

var tr = $(this).prev('.parentRow');
tr.addClass('rowIsDirty');

<tr class="vcenter parentRow">
                    <td class="hidden">@element.ElementName</td>
                    <td class="details-control meter"></td>
                    <td>@element.ElementTemplateName</td>
                    <td>@element.ElementName</td>
                    <td>@element.MeterTemplateName</td>
                    <td>@element.MeterName</td>
                </tr>

<td class="details-control">@element.CaseDataPairs</td>
                        <td class="text-left"><b>@item.ProductName</b></td>
                        <td class="text-left">@item.ProductGroupName</td>
                        <td class="text-center">@item.VersionsCount</td>
                        <td class="text-center">
                            <a href="@Url.Action("ProductView", "ProductManagement", new RouteValueDictionary(new {productId = item.ProductId}))" class="btn btn-sm btn-secondary ui-tooltip details-Customer" id="ProductDetails"><i class="fa fa-pencil-square-o"></i></a>
                        </td>
                                               <td class="text-center">
                            <input checked="@item.IsActive" data-toggle="toggle" class="toggleCheckBox ActivateProductButton" data-style="ios" data-on="Active" data-off="InActive" type="checkbox" id="EditAccountIsActive" data-product-id="@item.ProductId">
                        </td>

  $(document).on('change', '.ActivateProductButton, function() {
            UpdateStatus($(this));
        });

        function UpdateStatus(thisObj) {
            var tr = thisObj.closest('.parentRow');
            tr.removeClass('highlightExpanded');
            tr.addClass('rowIsDirty');
        }

它没有给我要突出显示的 parentRow。有什么想法吗？

Answer 1

我尝试创建一个简化版本的表格并在单击按钮时添加一个事件...

希望您能够修改此代码以满足您的需要。

代码选择最近的具有类 .parentRow 的节点，并且由于嵌套行被添加为兄弟行，我们选择前一行 (.prev() ) 标记为脏(或突出显示或其他)

如果您对代码有任何疑问，请告诉我。

function UpdateStatus(thisObj) {
  var tr = thisObj.closest('.parentRow').prev();
  $(tr).removeClass('highlightExpanded');
  $(tr).addClass('rowIsDirty');
}

$(document).ready(function() {
  $('.UnitStatusButton').on('click', function() {
    UpdateStatus($(this));
  });
});

.highlightExpanded {
  background-color: lightblue;
}
.rowIsDirty {
  background-color: royalblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1">
  <tr role="row" class="even shown">
    <td class=" details-control">iconhere</td>
    <td class="sorting_1">Brielle Williamson</td>
    <td>Integration Specialist</td>
    <td>New York</td>
    <td>$372,000</td>
  </tr>
  <tr class="parentRow highlightExpanded">
    <td colspan="5">
      <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
        <tbody>
          <tr>
            <td>Full name:</td>
            <td>Brielle Williamson</td>
          </tr>
          <tr>
            <td>Extension number:</td>
            <td>4804</td>
          </tr>
          <tr>
            <td>Extra info:</td>
            <td>And any further details here (images etc)...</td>
          </tr>
          <tr>
            <td>Edit</td>
            <td>
              <button class="UnitStatusButton">Click Me</button>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>

  <tr role="row" class="even shown">
    <td class=" details-control">iconhere2</td>
    <td class="sorting_1">Jane Williamson</td>
    <td>No Specialist</td>
    <td>New York</td>
    <td>$2,000</td>
  </tr>
</table>