0

我有一张桌子（模拟网格行为）：

<table class="searchResult" border="1" width="100%">
<thead>
    <tr>
        <th></th>
        <th>Last Name</th>
        <th>Middle Name</th>
        <th>First Name"</th>
    </tr>
</thead>
<tbody>@foreach (var per in @Model) {
    <tr class="parent">
        <td>+</td>
        <td>@per.LastName</td>
        <td>@per.MiddleName</td>
        <td>@per.FirstName</td>
    </tr>
    <tr class="child">
        <td colspan="11">
            <table width="100%">
                <tr>
                    <td>
                        Home Address: @per.HomeAddress
                    </td>
                    <td>
                         Race : @per.Race
                    </td>
                </tr>
            </table>
        </td>`
    </tr>}
</tbody>

class="parent" 行上的 "+" 展开 class="child" 行（展开/折叠）

jquery 用于展开和折叠：

$(document).ready(function () {
    $('table.searchResult').each(function () {
        var $table = $(this);
        $table.find('tr.child').hide();
        $table.find('.parent').click(function () {
            var sign = $.trim($(this).find('td:first').text());
            $(this).nextUntil('.parent').toggle();
            if (sign == '+')
                $(this).find('td:first').text('-');
            else
                $(this).find('td:first').text('+');
        });
    });
});

我的问题是

  1. 如何将备用行样式应用于具有 class="parent" 的行？
  2. 如果有多个记录具有完全相同的名字、中间名和姓氏，则行应以绿色高亮显示。（模型按姓氏然后按中间名排序，然后按名字排序）

我对 jquery 和 mvc 很陌生，确切地说是 10。我将非常感谢您的帮助。

4

2 回答 2

1

对于您的第一个请求 CSSnth-child(even)或nth-child(odd)可能不完全有效，因为您的带有类的行parent可能不完全是evens或odd按照它们出现的顺序，但是可以使用 jQuery 选择器轻松定位这些：

$(".parent:even").each(function()
{
    $(this).css("background-color","#CCC");
});

对于第二个请求，试试这个：

var cats = [];
$('.child').each(function() {
    var text = $(this).text();
    if ($.inArray(text, cats) === -1) {
        cats.push(text);
    } else {
        $(this).css("background-color","green");
    }
});

这假设该行的全部内容已经存在。它可能无法完全按照您的意愿工作，因此您可能需要根据您的需要对其进行一些调整。

jsfiddle：http: //jsfiddle.net/atngN/

于 2013-03-29T20:57:39.543 回答
0

第1部分）

$(function() {
    var index = 1;
    $("tr.parent").each(function() {
        $(this).siblings().each(function() {
           if ($(this).hasClass("parent")) {
             return false; // stop execution
          }
          else if ((++index % 4) == 1) {
              $(this).toggleClass("highlighted");
          }
       });
    });
});

第2部分）

@{
    var namesWithIndex = Model.Select(pers => pers.FirstName + pers.MiddleName + pers.LastName);
    var duplicateRows = Model.Where(pers => namesWithIndex.Count(name => pers .FirstName + pers .MiddleName + pers.LastName == name) > 1);
}

然后只需检查当前人员是否在该 duplicateRows 列表中，并为他们提供另一个 css 类以将背景颜色突出显示为绿色。

 <tbody>@foreach (var per in @Model) {
 <tr class="parent @(duplicateRows.Contains(per)?"highlightGreen":string.Empty)  " >
于 2013-03-29T20:44:55.560 回答