设计一个级联表

Question

我想在现有表中插入两行，其中包含两列。

例如

这是一个默认的折叠表：

这是我点击[+]符号时想要的扩展表格

查看：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>


<div>
<table>
        <tr>
            <th>
                Collapse/Expand
            </th>
            <th>
                Student ID
            </th>

            <th>
                Quarter
            </th>
            <th>
                Level
            </th> 
            <th>
                Subject
            </th>
            <th >
                Section
            </th>                        
        </tr>
</table>
</div>

<div>
<table>
        <% if (Model != null)                    
           foreach (var item in Model) { %>
         <tr>
             <td>
                <img id="showDetails" class="showDetails" alt="showDetails" src="/Content/show.gif" onclick="javascript:showDetails()"/>
                <img id="hideDetails" class="hideDetails" alt="hideDetails" src="/Content/hide.gif" onclick="hideDetails()"/>
             </td>
            <td>
                <%= Html.Encode(item.StudentID)%>
            </td>

            <td>
                <%= Html.Encode(item.Quarter) %>
            </td>
            <td>
                <%= Html.Encode(item.Level) %>
            </td>
            <td>
                <%= Html.Encode(item.Subject) %>
            </td>
            <td>
                <%= Html.Encode(item.Section) %>
            </td>            
            <td>
            <%="..." %>
            </td>
            <td>
            <%="..." %>          
        </tr>      
    <%}%>
</table>
</div>

jQuery的：

$(function () {
    $(".showDetails").click(showDetails);
});

function showDetails（）{

$('td:last').remove(); // removes the last two td elements
$('td:last').remove();
var link = '/Student/ShowDetails';
$.ajax({
    type: 'POST',
    url: link,
    data: { id: this.parentElement.nextSibling.innerText },
    dataType: 'json',
    success: function (result) {
        $.each(result.Details, function (item, value) {
            var Subject = '<td>' + value.subject.toString() + '</td>';
            var Section = '<td >' + value.section.toString() + '</td>';
            var appendRow = Subject + Section;
            $(appendRow).insertAfter('td:last');
        });
    },
    error: function (result) {
        alert("Failed")
    }
});
}

控制器：

[HttpPost()]
public ActionResult ShowDetails(string id)
{
    DataContext db = new DataContext();

    var subject = (from p in db.vwStudentDetails.Where(p => p.StudentID == id)
                      group p by p.Subject into g
                      select g.Key).ToList();

    var section = (from p in db.vwStudentDetails.Where(p => p.StudentID == id)
                      group p by p.Section into g
                      select g.Key).ToList();

    return Json(new { subject, section});
}

我该如何处理？