Javascript 如何使用部分视图展开/折叠html表？

单击按钮时，我正在尝试展开/折叠表格行。目前，我只能扩大这一行

我也希望能把它折叠起来

我使用的是局部视图。 我已经尝试过这样做：但无法让它工作，因为我正在foreach循环中从sql数据库加载数据

澄清一下：这扩展了表，但我缺少javascript代码的折叠部分。提前谢谢

局部视图

<div class="table" id="logtable">
        <div class="row">
            <div class="cell" id="tableth">
                message
            </div>
        </div>

        @foreach (var item in Model.Logs)
        {
            <div class="row">
                <div class="cell" id="tabletd">
                    <input type="button" name="answer" value="Show Div" onclick="showDiv(@item.id.ToString())" />
                    @Html.DisplayFor(modelItem => item.message)
                </div>
            </div>
            <div class="row">
                <div id="@item.id.ToString()" style="display:none;" class="answer_list">
                    <strong>Uri:</strong> @item.Uri <br/>
                    <strong>Method:</strong> @item.Method <br />
                    <strong>HttpStatus:</strong> @item.HttpStatus <br />
                </div>
            </div>

<script type="text/javascript">
            function showDiv(message) {
                document.getElementById(message).style.display = "block";
            }
        </script>

消息
@foreach（Model.Logs中的var项）
{
@DisplayFor（modelItem=>item.message）
Uri:@item.Uri

方法：@item.Method

HttpStatus:@item.HttpStatus

Javascript（在我的HTML视图中）

函数showDiv（消息）{
document.getElementById（message.style.display=“block”；
}

是否需要切换功能？检查元素的状态，然后选择是显示还是隐藏：

<script type="text/javascript">
            function showDiv(message) {
                if(document.getElementById(message).style.display == 'block'){
                    document.getElementById(message).style.display = "none";
                }
                else{
                    document.getElementById(message).style.display = "block";
                }
            }

</script>

您甚至可以制作漂亮的动画：

        function showDiv(message) {
            $('#'+message).slideToggle();

        }

#dvExpoByBatchDate.expandExpo{
背景图像：url（“../Images/Expand.gif”）；
背景重复：无重复；
背景位置：中心，中心；
}
#DveExpobyBatchDate.ExpandExpo已禁用{
背景图像：url（“../Images/ExpandDisabled.gif”）；
背景重复：无重复；
背景位置：中心，中心；
}
#DveExpobyBatchDate.collapseExpo{
背景图像：url（“../Images/Collapse.gif”）；
背景重复：无重复；
背景位置：中心，中心；
}
//这是WrapperModel，它包含不同级别的所有模型。
公共类包装器模型
{
公开名单；
公共列表管理器；
公开名单编程器；
}
@model.WrapperModel
//默认设置为折叠父标题
美元（“#dtExposure.relationshipExposure”）.attr（'colspan'，1）；
//隐藏子列
$（“.subRelationshipExposure”）.hide（）；
#DTTR-th{
游标：默认！重要；
}
@如果（型号！=null）
{
if（Model.ListEmployee！=null）——父行视图
{
@Html.Partial（“暴露/_ParentPartial”，模型）
}
if（Model.Listmanger！=null）——子行视图
{
@Html.Partial（“暴露/_ChildPartial”，模型）
}
}
//父部分视图
@model.WrapperModel
身份证件
全名►
@*隐藏子ChildColumn*@
全名
名字
姓
电话
@foreach（Model.ListEmployee中的var项）
{
@项目1.CDL
@item.FullName
@item.FirstName
@item.LastName
@项目.电话
}
//子部分视图
@model.WrapperModel
身份证#
全名
第一个Nmae
姓
电话
@*客户级别*@
@foreach（Model.listmanager中的var项）
{
var currCustomerMasterId=item.CUSTOMERMASTERID；
@item.ID
@item.FULLNAME
@item.FIRSTNAME
@item.LASTNAME
@项目.电话
//对于纯MVC网格崩溃
功能切换曝光（“relationshipExposure”、“subRelationshipExposure”，4）{
$（文档）。在（“，”+类名，函数（e）上{
var selfExposre=$（“+className）；
var subSelfExposre=$（“+”子类名称）；
if（selfexposure.attr（'colspan'）==colspan）{
subselfexpose.toggle（）；
自曝光属性（'colspan'，1）；
isCollpase=false；
}
否则{
subselfexpose.toggle（）；
selfexposure.attr（'colspan'，colspan）；
isCollpase=true；
}
var varId=自曝光查找（“span”）；
变量为空（）；
isCollpase？varId.html（◄”）：varId.html（►”）；
});
}

你的循环创建了重复的

id

元素，例如：

tabletd

。尝试从浏览器发布呈现的

html

。这正是我想要的。谢谢！：）我会在5分钟内检查答案。。

        function showDiv(message) {
            $('#'+message).slideToggle();

        }

 <style>

 #dvExpoByBatchDate .expandExpo {
        background-image: url("../Images/Expand.gif");
        background-repeat: no-repeat;
        background-position: center,center;
    }

    #dvExpoByBatchDate .expandExpoDisabled {
        background-image: url("../Images/ExpandDisabled.gif");
        background-repeat: no-repeat;
        background-position: center,center;
    }

    #dvExpoByBatchDate .collapseExpo {
        background-image: url("../Images/Collapse.gif");
        background-repeat: no-repeat;
        background-position: center,center;
    }


  </style>

  //This is WrapperModel which contains all models for different level. 

 public class WrapperModel
    {
        public List<Employee> ListEmployee;
        public List<Manger> Listmanger;
        public List<Programmer> ListProgrammer;

    }




  @model Model.WrapperModel


  <script>  
    //Default set to collapse Parent Header
    $("#dtExposure .relationshipExposure").attr('colspan', 1);

  //Hide child columns
   $(".subRelationshipExposure").hide();
</script>

<style>
    #dtExposure tr th {
        cursor: default !important;
    }
  </style>

  <table id="dtExposure" class="dbExposure display">
    @if (Model != null)
    {
        if (Model.ListEmployee!= null)  -- Parent Row View
        {
            @Html.Partial("Exposure/_ParentPartial", Model)
        }
        if (Model.Listmanger!= null)  -- child Row View
        {
            @Html.Partial("Exposure/_ChildPartial", Model)
        }
    }
</table>

  // Parent Partial View

  @model Model.WrapperModel


   <thead id="groupHead">
    <tr>
        <th rowspan="2" style="background-color: #003675"></th>

        <th rowspan="2" style="background-color: #003675">ID</th>
        <th class="relationshipExposure sorting_disabled" colspan="4"           style="background-color: #003675">
            FullName <span>&#9658</span>  
    </tr>
    <tr>
        @*HiddenSubChildColumn*@
        <th style="background-color: #003675">FullName</th>
        <th class="subRelationshipExposure" style="background-color: #003675">First Name</th>
        <th class="subRelationshipExposure" style="background-color: #003675">Last Name</th>
        <th class="subRelationshipExposure" style="background-color: #003675">Phone</th>       
    </tr>
</thead>

<tbody id="groupBody">
    @foreach (var item in Model.ListEmployee)
    {
        <tr>
            <td id="toggleExposureRelationship" class="expandExpo emptyTd" style="background-color:white;border:none"></td>          
            <td>@item.CDL</td>         
            <td>
                <span id="relationshipExpo" style="color: #0000ff; cursor: pointer">@item.FullName</span>
            </td>
            <td class="subRelationshipExposure">@item.FirstName</td>
            <td class="subRelationshipExposure">@item.LastName</td>
            <td class="subRelationshipExposure">@item.Phone</td>           
        </tr>
    }
</tbody>




//Child Partial View


  @model Model.WrapperModel


  <thead id="customHead">
    <tr class="SubExposureCustomer" style="display: none">
        <th class="emptyTd"></th>
        <th style="background-color: #003675">ID#</th>
        <th style="background-color: #003675">Full Name</th>
        <th style="background-color: #003675"   class="subRelationshipExposure">First Nmae</th>
        <th style="background-color: #003675" class="subRelationshipExposure">Last Namen</th>
        <th style="background-color: #003675" class="subRelationshipExposure">Phone</th>
</tr>

<tbody id="customBody">
    @*Customer Level*@
    @foreach (var item in Model.Listmanger)
    {
        var currCustomerMasterId = item.CUSTOMERMASTERID;
        <tr class="SubExposureCustomer" data-currcustomermasterid="@currCustomerMasterId" style="display: none">
                        <td class="ExpoCustomerIcon expandExpo emptyTd"   style="background-color:white;border:none"></td>
            <td>@item.ID</td>
            <td>@item.FULLNAME</td>
            <td class="subRelationshipExposure">@item.FIRSTNAME</td>
            <td class="subRelationshipExposure">@item.LASTNAME</td>
            <td class="subRelationshipExposure">@item.PHONE</td>
</tr>


//For Pure MVC Grid Collapse
function ToggleExposure(“relationshipExposure”, “subRelationshipExposure”, 4) {
    $(document).on("click", "." + className, function (e) {
        var selfExposre = $("." + className);
        var subSelfExposre = $("." + subclassName);
        if (selfExposre.attr('colspan') == colspan) {
            subSelfExposre.toggle();
            selfExposre.attr('colspan', 1);
            isCollpase = false;
        }
        else {
            subSelfExposre.toggle();
            selfExposre.attr('colspan', colspan);
            isCollpase = true;
        }

        var varId = selfExposre.find("span");
        varId.empty();
        isCollpase ? varId.html("&#9668") : varId.html("&#9658");
    });
}