jquery - MVC 3 和 jquery

Question

我有一张表(模拟网格行为):

<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。非常感谢您的帮助。

Answer 1

对于您的第一个请求，CSS nth-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/