Question

我使用一些动态附加表行的JQuery。

我希望标题行位于静态HTML（我已添加）中，而JQuery只是为了在其上添加其他行。但是，行从不与标题对齐，实际上所有行似乎都在行的第一个单元格中，而不是将输入分散到正确的列中。

这是添加行的JQuery：

$("#addItem").click(function () {
    $.ajax({
        url: '/Claims/BlankEditorRow',
        cache: false,
        success: function (html) {
            $("#editorRows").append(html);
            $('#editorRows .date').datepicker({ dateFormat: "dd/mm/yy" });
        }
    });
    return false;
});

这是JQuery添加的部分内容：

   <tr class="editorRow table ">
     <td >

@Html.DropDownListFor(model => model.Selecteduserid, new SelectList(Model.users, "UserID", "FirstName"))</td>

    <td>
@Html.EditorFor(model => model.MeetingDate)</td>
        <td>
@Html.EditorFor(model => model.Hours)</td>    <td>
@Html.EditorFor(model => model.MileageCost)</td>    <td>
@Html.EditorFor(model => model.TravelCost)</td>

    <td>
@Html.EditorFor(model => model.Comments)</td>

    <td>
<a href="#" class="deleteRow">delete</a>
</td>
</tr>

这是视图中的表格被添加到：

  <table id="editorRows"  >
   <tr  >
         <th >
             Heading1</th>
    <th>
Heading2</th>
        <th>
Heading3</th>    <th>
Heading4</th>    <th>
Heading5</th>
    <th>
Heading6</th>
    <th>
Heading7</th>
        <td>
Delete Header
</td>
</tr>
</table>

谢谢。

编辑：

动作：

public PartialViewResult BlankEditorRow()
{

    LineViewModel vm = new LineViewModel();
    vm.users = getUserList();
    vm.categories = getcatList();
    vm.MeetingDate = DateTime.Now;
    vm.SubCatID = 1;//need to set as not currently required therefore as null allowed, it doesnt put default value in
    // vm.users = new List(db.users,"UserID","FirstName");
    // ViewBag.SubmissionUserID = new SelectList(db.users,"UserID","FirstName");
    return PartialView("NewRow", vm);
}

全新的行视图：

@model authentication.ViewModels.LineViewModel


@using authentication.WebUI.Helpers
@using (Html.BeginCollectionItem("LineViewModels"))
{



   <tr class="editorRow table ">
     <td >

@Html.DropDownListFor(model => model.Selecteduserid, new SelectList(Model.users, "UserID", "FirstName"))</td>
    <td>
Category @Html.DropDownListFor(model => model.Selectedcatid, new SelectList(Model.categories, "CatID", "CatName"))</td>
    <td>
@Html.EditorFor(model => model.MeetingDate)</td>
        <td>
@Html.EditorFor(model => model.Hours)</td>    <td>
@Html.EditorFor(model => model.MileageCost)</td>    <td>
@Html.EditorFor(model => model.TravelCost)</td>

    <td>
@Html.EditorFor(model => model.Comments)</td>
            <td>
<a href="#" class="deleteRow">delete</a>
</td>
</tr>

}

Answer 1

您需要插入8个单元格并将HTML更改为

Live Demo

<table>
  <thead>
    <tr>
        <th>Heading1</th>
        <th>Heading2</th>
        <th>Heading3</th>
        <th>Heading4</th>
        <th>Heading5</th>
        <th>Heading6</th>
        <th>Heading7</th>
        <th>Delete Header</th>
    </tr>
  </thead>
  <tbody id="editorRows"></tbody>
</table>

Answer 2

感谢mplungjan的帮助。我想出了最后一点，我必须在@using（Html.BeginCollectionItem（“LineViewModels”））行之前移动我的部分标签。这非常有效。如下：

@model authentication.ViewModels.LineViewModel


@using authentication.WebUI.Helpers
   <tr class="editorRow table ">
@using (Html.BeginCollectionItem("LineViewModels"))
{




     <td >

@Html.DropDownListFor(model => model.Selecteduserid, new SelectList(Model.users, "UserID", "FirstName"))</td>
    <td>
Category @Html.DropDownListFor(model => model.Selectedcatid, new SelectList(Model.categories, "CatID", "CatName"))</td>
    <td>
@Html.EditorFor(model => model.MeetingDate)</td>
        <td>
@Html.EditorFor(model => model.Hours)</td>    <td>
@Html.EditorFor(model => model.MileageCost)</td>    <td>
@Html.EditorFor(model => model.TravelCost)</td>

    <td>
@Html.EditorFor(model => model.Comments)</td>
            <td>
<a href="#" class="deleteRow">delete</a>
</td>


}

       </tr>

将表行附加到现有标题

2 个答案: