ASP.NET MVC突出顯示鏈接點擊表中的行

Question

我有兩個視圖。他們每個都包含表格。第一個視圖有一個表格，其中有鏈接，當點擊時加載第二個視圖的表格。當點擊鏈接時，我需要能夠突出顯示第二個視圖表中的某些表格行。因此，如果#@order.type =退單，則應該突出顯示任何正在扣款的行。如果@ order.type = retroactive，那麼追溯行應該被突出顯示。這裏的主要問題是它必須在第一個視圖點擊時發生。我無法在第二個視圖中執行我的邏輯。它必須在第一個視圖中完成，但我不確定如何在第一個視圖中訪問第二個視圖中的數據。有任何想法嗎？

這是我的第一個觀點：

<style> 
    .instant-hide{display:none;} 
</style> 

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-11 col-center-block delayspiffdata"> 
      <table class="delay_spiff_tbl" id="table1"> 
       <thead> 
        <tr> 
         <th class="blank"></th> 
         <th>Submitted Activations/Instant Spiff</th> 
         <th>Charge Back/$</th> 
         <th>Retroactive/$</th> 
        </tr> 
       </thead> 
       <tbody> 
        @for (int date = 0; date < Model.Count; date++) 
        { 
         <tr class="date-row" onclick="$('.date_@date').toggleClass('date-hide');"> 
          <td class="spiffdate"> 
           @Model[date].Date.ToString("dddd MM/dd/yyyy") 
           <i class="fa fa-plus-circle expander_open"></i> 
          </td> 
          <td>@Model[date].Carriers.Sum(c => c.SubmittedActivationCount)/@Model[date].Carriers.Sum(c => c.InstantSpiffTotal).ToString("C")</td> 
          <td>@(Model[date].Carriers.Sum(c => c.ChargeBackCount) == 0 ? "--" : Model[date].Carriers.Sum(c => c.ChargeBackCount) + "/" + @Model[date].Carriers.Sum(c => c.ChargeBackTotal).ToString("C"))</td> 
          <td>@(Model[date].Carriers.Sum(c => c.RetroactiveCount) == 0 ? "--" : Model[date].Carriers.Sum(c => c.RetroactiveCount) + "/" + @Model[date].Carriers.Sum(c => c.RetroactiveTotal).ToString("C"))</td> 
         </tr> 

         for (int carrier = 0; carrier < Model[date].Carriers.Count; carrier++) 
         { 
          <tr class="date_@date date-hide" onclick="$('.submitted-@date-@carrier').toggleClass('carrier-hide');"> 
           <td><span class="pull-left dash"><i class="fa fa-caret-up"></i></span> @Model[date].Carriers[carrier].Carrier</td> 
           <td> 
            <a onclick="$('.carrier').not('.submitted-@date-@carrier').addClass('carrier-hide');$('.submitted-@date-@carrier').toggleClass('carrier-hide');pullDetails('@Model[date].Carriers[carrier].CarrierId', '@Model[date].Date', 'submitted-@date-@carrier', 'spiff')"> 
             @(Model[date].Carriers[carrier].SubmittedActivationCount == 0 ? "--" : 
           Model[date].Carriers[carrier].SubmittedActivationCount + "/" + 
             Model[date].Carriers[carrier].InstantSpiffTotal.ToString("C")) 
            </a> 
           </td> 
           <td> 
            <a class="chargeback" onclick="$('.carrier:not()').not('.approved-@date-@carrier').addClass('carrier-hide');$('.approved-@date-@carrier').toggleClass('carrier-hide');pullDetails('@Model[date].Carriers[carrier].CarrierId', '@Model[date].Date','submitted-@date-@carrier', 'chargeback')"> 
             @(Model[date].Carriers[carrier].ChargeBackCount == 0 ? "--" : 
           Model[date].Carriers[carrier].ChargeBackCount + "/" + 
             Model[date].Carriers[carrier].ChargeBackTotal.ToString("C")) 
            </a> 
           </td> 
           <td> 
            <a class="retroactive" onclick="$('.carrier').not('.ineligible-@date-@carrier').addClass('carrier-hide');$('.ineligible-@date-@carrier').toggleClass('carrier-hide');pullDetails('@Model[date].Carriers[carrier].CarrierId', '@Model[date].Date', 'submitted-@date-@carrier', 'retrospiff')"> 
             @(Model[date].Carriers[carrier].RetroactiveCount == 0 ? "--" : 
           Model[date].Carriers[carrier].RetroactiveCount + "/" + 
             Model[date].Carriers[carrier].RetroactiveTotal.ToString("C")) 
            </a> 
           </td> 
          </tr> 

          <tr class="date_@date date-hide submitted-@date-@carrier carrier-hide carrier"> 
           <td class="submitted_details" colspan="100%"></td> 
          </tr> 
         } 
        } 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 



<script> 
    $(function() { 
     $('.date-row').click(function() { 
      $(this).find('i').toggleClass('fa-minus-circle fa-plus-circle'); 
     }); 
    }); 
    $(function() { 
     $('.date-hide').click(function() { 
      $(this).find('i').toggleClass('fa-caret-down fa-caret-up'); 
     }); 
    }); 

    function pullDetails(carrierId, startDate, divid, status) { 


     $.get("@Url.Action("getInstantSpiffOrderDetails", "Dashboard")", 
      { carrierId: carrierId, startDate: startDate, status:status}, 
      function (data) { 
       $('.' + divid + ' .submitted_details').html(data); 
       $('.' + divid).removeClass('carrier-hide'); 
      }); 
    } 


</script> 

這裏是我的第二個觀點：

<table class="delay_spiffgranular"> 
    <thead> 
     <tr> 
      <td></td> 
      <th>Order No.</th> 
      <th>Type</th> 
      <th>Product</th> 
      <th>Price</th> 
      <th>Fill Date</th> 
      <th>Due Date</th> 
      <th>User</th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var order in Model) 
     { 
      <tr onclick="$('#instant_@order.OrderNo').toggleClass('instant-hide')" class="instant-row"> 
       <td> 
        @if(order.LinkedOrders.Count > 0){ 
         <span class="pull-left dash"><i class="fa fa-caret-up"></i></span> 
        } 
       </td> 
       <td> 
        @if (order.LinkedOrders.Count > 0) 
        { 
         @order.OrderNo 
        } 
        else 
        { 
         <a onclick="DisplayReceipt('@order.OrderNo')">@order.OrderNo</a> 
        } 
       </td> 
       <td>@order.Type</td> 
       <td>@order.ProductName</td> 
       <td>@order.Price.ToString("C")</td> 
       <td>@(order.FillDate == null ? "--" : order.FillDate.Value.ToShortDateString())</td> 
       <td>@(order.DueDate == null ? "--" : order.DueDate.Value.ToShortDateString())</td> 
       <td>@order.Username</td> 
      </tr> 
      if (order.LinkedOrders.Count != 0) 
      { 
       <tr id="instant_@order.OrderNo" class="instant-hide"> 
        <td><span class="pull-left dash"><i class="fa fa-caret-up"></i></span></td> 
        <td colspan="7"> 
         <table id="instantTable"> 
          <thead> 
           <tr> 
            <th>Order No.</th> 
            <th>Type</th> 
            <th>Price</th> 
            <th>Reason</th> 
            <th>Fill Date</th> 
            <th>Due Date</th> 
           </tr> 
          </thead> 
          <tbody> 
           @foreach (var linkedOrder in order.LinkedOrders) 
           { 
            <tr> 
             <td> 
              @if (@linkedOrder.Type == "Spiff") 
              { 
               <a onclick="DisplayReceipt('@linkedOrder.OrderNo')">@linkedOrder.OrderNo</a> 
              } 
              else 
              { 
               @linkedOrder.OrderNo 
              } 

             </td> 

             <td>@linkedOrder.Type</td> 
             <td>@linkedOrder.Price.ToString("C")</td> 
             <td>@linkedOrder.Reason</td> 
             <td>@(linkedOrder.FillDate == null ? "--" : linkedOrder.FillDate.Value.ToShortDateString())</td> 
             <td>@(linkedOrder.DueDate == null ? "--" : linkedOrder.DueDate.Value.ToShortDateString())</td> 

            </tr> 
           } 
          </tbody> 
         </table> 
        </td> 
       </tr> 
      } 
     } 
    </tbody> 

</table> 

更新：

我把下面的代碼在我的應用程序的第二個觀點。

<script> 
     $(document).ready(function() { 
      $('tr').each(function (index) { //iterate over all table rows 
       if (index > 0) {  //skip header 

        if ($(this).children('td:nth-child(2)').text().trim() != 'Prepaid Charge Back ') { 
         $(this).toggleClass('highlighted'); 
        } 
        if ($(this).children('td:nth-child(2)').text().trim() != 'Retroactive Prepaid Spiff') { 
         $(this).toggleClass('highlighted'); 
        } 
       } 
      }); 
     }) 
    </script> 

Answer 1

您可以遍歷所有錶行，然後找到符合條件的行。

$(document).ready(function() { 
     $('tbody tr').each(function (index) { //iterate over all table rows 
      if (index > 0) {  //skip header 

       if ($(this).children('td:nth-child(3)').text().trim() != 'Prepaid Charge Back') { 
        $(this).toggleClass('highlighted'); 
       } 
       if ($(this).children('td:nth-child(3)').text().trim() != 'Retroactive Prepaid Spiff') { 
        $(this).toggleClass('highlighted'); 
       } 
      } 
     }); 
    })