如何在HTML、CSS和ASP.NET MVC中实现点击表格行展开嵌套子表

我在SQL数据库中有两张表customers和orders，一个客户对应多个订单。我想要实现的效果是：点击表格某一行<tr>时，在当前点击行与下一行之间插入新的订单子表。但目前实际运行时，被插入内嵌子表的<tr>的下一行<tr>不再属于原表格结构，不符合预期效果。相关代码如下：

数据库建表语句 #

CREATE TABLE [dbo].[customer_list](
[customer_id] [int] NOT NULL,
[ContactName] [varchar](255) NOT NULL,
[phone] [varchar](255) NOT NULL,
[address] [varchar](255) NOT NULL,
[city] [varchar](255) NOT NULL,
[postalcode] [varchar](255) NOT NULL
) ON [PRIMARY]

CREATE TABLE [dbo].[order_list](
[OrderId] [int] NOT NULL,
[customer_id] [int] NOT NULL,
[OrderDate] [date] NULL,
[ShipDate] [date] NULL,
[address] [varchar](255) NOT NULL,
[ShipName] [varchar](255) NOT NULL,
[postalcode] [varchar](255) NOT NULL
) ON [PRIMARY]

模型类代码 #

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication7.Models
{
public class Customer
{
    public string Name { get; set; }
    public string phone { get; set; }
    public string address { get; set; }
    public string city { get; set; }

}
public class Orders
{
    public int  OrderID { get; set; }
    public int CustomerId { get; set; }
    public DateTime OrderDate { get; set; }
    public DateTime ShipDate { get; set; }
    public string address { get; set; }
    public string ShipName { get; set; }
    public string PostalCode { get; set; }
}
public class MasterDetails
{
    public List<Customer> CustPersonal { get; set; }
    public List<Orders> CustRegions { get; set; }

}
}

数据仓储层代码 #

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Dapper;
using WebApplication7.Models;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;

namespace WebApplication7.Repository
{
        public class CustomerRepo
        {
            // 处理数据库连接相关逻辑
            SqlConnection con;
            private void connection()
            {
                string constr = ConfigurationManager.ConnectionStrings["SqlConn"].ToString();
                con = new SqlConnection(constr);
            }
            /// <summary>  
            /// 获取多表关联数据
            /// </summary>  
            /// <returns></returns>  
            public IEnumerable<MasterDetails> GetMasterDetails()
            {
                connection();
                con.Open();
                var objDetails = SqlMapper.QueryMultiple(con, "GetMasterDetails", commandType: CommandType.StoredProcedure);
                MasterDetails ObjMaster = new MasterDetails();

                // 将多表查询结果分别赋值到对应的模型类中
                ObjMaster.CustPersonal = objDetails.Read<Customer>().ToList();
                ObjMaster.CustRegions = objDetails.Read<Orders>().ToList();

                List<MasterDetails> CustomerObj = new List<MasterDetails>();
                // 将记录添加到MasterDetails列表
                CustomerObj.Add(ObjMaster);
                con.Close();

                return CustomerObj;

            }
        }
  
}

控制器代码 #

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication7.Models;
using WebApplication7.Repository;

namespace WebApplication7.Controllers
{
    public class CustomerController : Controller
    {
        public ActionResult MasterDetail()
        {
            CustomerRepo objDet = new CustomerRepo();
            MasterDetails CustData = new MasterDetails();

            List<MasterDetails> MasterData = objDet.GetMasterDetails().ToList();

            CustData.CustPersonal = MasterData[0].CustPersonal;
            CustData.CustRegions = MasterData[0].CustRegions;


            return View(CustData);
        }
    }
}

视图代码 #

@model IEnumerable<WebApplication7.Models.MasterDetails>

@{    ViewBag.Title = "MasterDetail";}

@using (Html.BeginForm())
{
    <div class="form-horizontal">
        <hr />
        <div class="form-group">
            <h5 class="btn btn-primary">客户主数据</h5>
            <div class="col-md-12">
                <table class="table table-hover col-md-3">

                    <tr>
                        <th>
                            联系人姓名
                        </th>
                        <th>
                            手机号
                        </th>
                        <th>
                            地址
                        </th>

                        <th>
                            城市
                        </th>
                        <th>
                            邮编
                        </th>
                    </tr>


                    @{
                        // 生成唯一ID
                        int i = 0;
                        foreach (var item in Model.CustPersonal)
                        {

                            <tr>
                                <td>


                                    @Html.EditorFor(o => o.CustPersonal[i].name, new { @id = "Name_" + i })
                                </td>
                                <td>
                                    @Html.EditorFor(o => o.CustPersonal[i].phone, new { @id = "NCustomerType_" + i })


                                </td>
                                <td>
                                    @Html.EditorFor(o => o.CustPersonal[i].address, new { @id = "Gender_" + i })
                                </td>

                                <td>
                                    @Html.EditorFor(o => o.CustPersonal[i].city, new { @id = "Gender_" + i })
                                </td>

                            </tr>
                            i++;
                        }
                    }
                </table>
            </div>
        </div>

        <div class="form-group">
            <h5 class="btn btn-primary">客户订单</h5>
            <div class="col-md-12">
                <table class="table table-condensed table-hover col-md-3">
                    <tr>
                        <th>
                            订单ID
                        </th>
                        <th>
                            下单日期
                        </th>
                        <th>
                            发货日期
                        </th>
                        <th>
                            收货人姓名
                        </th>
                        <th>
                            收货地址
                        </th>

                        <th>
                            收货邮编
                        </th>

                    </tr>
                    @{
                        // 生成唯一ID
                        int j = 0;
                        foreach (var item in Model.CustRegions)
                        {

                            <tr>
                                <td>


                                    @Html.EditorFor(o => o.CustRegions[j].OrderID, new { @id = "OrderID_" + j })
                                </td>
                                <td>
                                    @Html.EditorFor(o => o.CustRegions[j].OrderDate, new { @id = "OrderDate_" + j })


                                </td>
                                <td>
                                    @Html.EditorFor(o => o.CustRegions[j].ShipDate, new { @id = "ShipDate_" + j })
                                </td>

                                <td>
                                    @Html.EditorFor(o => o.CustRegions[j].ShipName, new { @id = "ShipName_" + j })
                                </td>

                                <td>
                                    @Html.EditorFor(o => o.CustRegions[j].address, new { @id = "address_" + j })
                                </td>
                                <td>
                                    @Html.EditorFor(o => o.CustRegions[j].PostalCode, new { @id = "PostalCode_" + j })
                                </td>

                            </tr>
                            j++;
                        }
                    }
                </table>
            </div>
        </div>

    </div>
}

我期望的输出效果参考图：
#

内容的提问来源于stack exchange，提问作者steve jhone