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