我的主视图中有以下 html 表定义
<table id="myDynamicTable" cellpadding="0" cellspacing="0" class="burTable" width="964px">
<thead>
<tr>
<th style="white-space: nowrap;display: inline;width: 40px" >
ColOne
</th>
<th style="white-space: nowrap;display: inline;width: 90px">
ColTow
</th>
<th style="white-space: nowrap;display: inline;width: 54px">
ColThree
</th>
<th style="white-space: nowrap;display: inline;width: 60px">
ColFour
</th>
<th style="white-space: nowrap;display: inline;width: 399px">
ColFive
</th>
<th style="white-space: nowrap;display: inline;width: 474px">
ColSix
</th>
</tr>
</thead>
<tbody>
@if (Model.myViewModel.Count() > 0)
{
int i = 1;
foreach (var item in Model.myViewModel)
{
<tr >
<td class="tdBorder">
@Html.DisplayFor(x => item.AutoNumber, new { @readonly = "readonly" })
@Html.HiddenFor(x => item.Code, new { id = "Code" + @i })
</td>
<td>
@Html.TextBoxFor(x => item.SerialNumber, new { id = "SerialNumber" + @i, @Class = "numberOnly", maxlength = 15 })
</td>
<td>
@Html.DropDownList("ddlItemType" + @i, new SelectList(ViewBag.ddlItemTypeList as System.Collections.IEnumerable, "Value", "Text", item.ItemTypeId))
</td>
<td>
@Html.TextBoxFor(x => item.Date, new { id = "Date" + @i })
</td>
<td>
@Html.DropDownList("ddlUnit" + @i, new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text", item.UnitId))
</td>
<td>
@Html.TextBoxFor(x => item.Comment, new { id = "Comment" + @i, @class = "Comment RestrictCharacters", maxlength = 1000 })
</td>
</tr>
i += 1;
}
}
else
{
<tr id="FirstRow" class="tdBorder">
<td class="tdBorder">
@Html.TextBox("AutoNumber", null, new { @width = 60, id = "AutoNumber" })
</td>
<td>
@Html.TextBox("SerialNumber", null, new { @width = 150, id = "SerialNumber" })
</td>
<td>
@Html.DropDownList("ddlItemType", new SelectList(ViewBag.ddlItemTypeList as System.Collections.IEnumerable, "Value", "Text"), new { @width = 60, id = "ddlItemType" })
</td>
<td>
@Html.TextBox("Date", null, new { @width = 60, id = "Date" })
</td>
<td>
@Html.DropDownList("ddlUnit", new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto", id = "ddlUnit" })
</td>
<td>
@Html.TextBox("Comment", null, new { @width = 700, id = "Comment" })
</td>
</tr>
}
</tbody>
</table>
我希望能够使用此处解释的 BeginCollectionItem 概念添加新行http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/并使用与 mvc 中的模型连接的 jquery 在表中添加行
下面是我想用作添加新行的模板的部分视图的定义。@using MyProject.Utilities @model MyProject.ViewModel.ReportDetailsViewModel
@using (Html.BeginCollectionItem("NewRow"))
{
<tr id="NewRow" class="tdBorder">
<td class="tdBorder">
@Html.TextBox("AutoNumber", null, new { @width = 60, id = "AutoNumber" })
</td>
<td>
@Html.TextBox("SerialNumber", null, new { @width = 150, id = "SerialNumber" })
</td>
<td>
@Html.DropDownListFor(model => model.ItemTypeId, Model.ItemTypeList, new { @id = "ddlItemType" })
</td>
<td>
@Html.TextBox("Date", null, new { @width = 60, id = "Date" })
</td>
<td>
@Html.DropDownList("ddlUnit", new SelectList(ViewBag.UnitList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto", id = "ddlUnit" })
@Html.DropDownListFor(model => model.UnitId, Model.UnitList)
</td>
<td>
@Html.TextBox("Comment", null, new { @width = 700, id = "Comment" })
</td>
</tr>
}
在我的主视图中,我正在尝试添加新行,如下所示
var tableBody = $('#myDynamicTable tbody');
var url = '@Url.Action("Add", "Report")';
$('#btnAddRow').click(function () {
$.get(url, function (response) {
tableBody.append(response);
});
});
问题是,看起来行是在表格主体之后添加的,而不是在最后一行之后的主体内部。
我遇到的另一个问题是新行列不与现有的第一行对齐,也没有选择应用于现有第一行中的控件的样式表。
下面是我到目前为止得到的截图,我正在努力用现有的第一行来点亮这些新行。