從數據表中的子項獲取父行

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>