在表行上单击隐藏或显示其他表行

On table row click hide or show other table row

本文关键字：显示 其他 单击 隐藏      更新时间：2023-09-26

在此html

@for (int i = 0; i < Model.AllCommonMatches.Length; i++)
{
    <tr class="category">
        <td>@Model.AllCommonMatches[i].StartDateTime.ToString("dddd dd MMMM HH:mm")</td>          
        <td>@Model.AllCommonMatches[i].EndDateTime.ToString("dddd dd MMMM HH:mm")</td>
        <td>@Model.AllCommonMatches[i].AvailableAttendees.Count &nbsp; of &nbsp; @Model.TotalAttendees</td>
    </tr>
    <tr class="subcategory">
       @foreach (var person in Model.AllCommonMatches[i].AvailableAttendees)
       {
           <td>@person.Email &nbsp; &nbsp; @person.FirstName &nbsp;&nbsp;@person.LastName</td>
       }
    </tr>                     
}

是否有可能对tr与子类点击显示/隐藏tr ?我对前端部分了解不多。

我为您设置了一个小JSFiddle: http://jsfiddle.net/veritas87/QSw3w/

$(document).ready(function() { 
    $('tr.category').on('click', function() { 
       $(this).next('.subcategory').fadeToggle(); 
    });
});

在JSFiddle中可以找到CSS和HTML。

您可以使用.toggle()的jQuery方法:

$( document ).ready(function() {
    $('.category').on('click', function(){
        $(this).next('.subcategory').toggle(); // or .slideToggle() or whatever
    });
});
相关文章：