Question

我有两个观点。它们每个都包含表格。第一个视图有一个表，其中包含链接，当单击时加载第二个视图的表。我需要能够在单击链接时突出显示第二个视图表中的某些表行。因此，如果#@order.type = chargeback，则应突出显示任何退款行。如果@ 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');
                }
            }
        });
    })

ASP.NET MVC在链接单击时突出显示表中的行

1 个答案: