Get Parent Row from Child in datatables

Question

From within a row in a child of a row in datatables, how do I find access the parent row in datatables. Basically, I would like to highlight the parent row when its child row after expansion is clicked.

I gave all parentRows a class name, and when a button in the child row is clicked, I did this:

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

It's not giving me the parentRow to highlight. Any ideas?

Answer 1

I tried to create a simplified version of a table and added an event to when a button is clicked...

Hopefully you will be able to modify this code to suit your needs.

The code selects the closest node with class .parentRow and, since the nested row is added as a sibling row, we select the previous row (.prev()) to mark as dirty (or highlight or whatever)

Let me know if you have any questions about the code.

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>