包含html控件的自定义列表

Question

我正在寻找有关在图像中创建/显示元素的最佳方法的指导。这用作日程表设置程序，显示“周一至周五我们从9点开放到5点”，他们可以选择单击“ +”号添加第二行，他们可以在上面说“周六和周日我们都开放9到12'。

图像中的模型包括用于日期的标准复选框和用于时间的文本输入

我当时正在考虑创建局部视图，该局部视图将创建类似于图像的页面。部分可以只包含：

<div class="hours-list">
</div>

然后在我要显示它的主页上，进行

@{Html.RenderPartial("_HoursOfOperation",new HoursOfOperationModel { args });}

我正在努力的是单击加号时该怎么办？我认为在局部视图中，有一些代码可以将代码动态地附加到div的现有项目下面。诸如此类（该代码将在PartialView中）：

$(document).ready(function() {    
  $(add_button).click(function(e){ //on clicking '+' button
  e.preventDefault();

  $(.hours-list).append(' 
  <div class="hours-of-operation-list"> <span>Some controls go here</span> </div>'); 
}
});

在主页上会是这样：

<div class="some-class" style="overflow:auto">
  @{Html.RenderPartial("_HoursOfOperation",new HoursOfOperationModel { args  });}
</div>

主页上的div将具有自动流程功能，因为它将位于其他控件的嵌套中，并且我的空间（高度）将受到限制，但现实情况是，如果存在，则行数不应超过3-4行那个。

这是关于如何使用包含html组件的项目创建列表并使用带有溢出的div查看列表的最佳解决方案吗？我错过了其他可用的选项吗？