使用jquery ajax post将行追加到表中

【问题标题】：append row to table using jquery ajax post使用jquery ajax post将行追加到表中
【发布时间】：2016-03-27 14:46:04
【问题描述】：

我正在尝试在我的 asp.net MVC 5 应用程序中动态地将行附加到表中。这是桌子：

<table class="table" id="acquisition-cost">
    <thead>
        <tr>
            <th class="text-left">Description</th>
            <th class="text-center" style="width: 180px">Quantity</th>
            <th class="text-right" style="width: 180px">Rate ($)</th>
            <th class="text-right" style="width: 180px">Amount ($)</th>
            <th class="text-center" style="width: 60px">Delete</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.AcquisitionCosts) {
            @Html.Partial("CostViewModel", item);
        }
    </tbody>
</table>

当点击添加行按钮时，它会调用 jquery ajax 函数。这会调用返回部分视图的控制器。

返回的局部视图如下所示：

<input type="hidden" name="costrow.index" autocomplete="off" value="a8a41a6a-f42c-48ae-9afb-eb61f734f65e" />    
<tr>  
  <td><input class="form-control text-left" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Description" maxlength="50" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Description" type="text" value="" /></td>
  <td><input class="form-control text-center auto" data-v-max="9999999999999" data-v-min="0" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Quantity" maxlength="15" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Quantity" placeholder="0" type="text" value="" /></td>
  <td><input class="form-control text-right auto" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Rate" maxlength="15" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Rate" placeholder="0" type="text" value="" /></td>
  <td><input class="form-control text-right auto" id="costrow_a8a41a6a-f42c-48ae-9afb-eb61f734f65e__Amount" maxlength="15" name="costrow[a8a41a6a-f42c-48ae-9afb-eb61f734f65e].Amount" placeholder="0" type="text" value="" /></td>
  <td class="text-center"><button class="btn icon-only" type="button"><i class="fa fa-trash-o"></i></button></td>    
</tr>

但是，在我追加到表格之后。 <tr> and <td> 标记从 html 中删除，仅附加输入标记。

$("#addstrategy").click(function () {
    $.ajax({
        type: "post",
        url: "/Wizard/StrategyRow",
        cache: false,
        datatype: "html",
        success: function (html) {
            alert(html);
            $("#acquisition-cost tbody").append(html);
        }
    });
});

响应警报，所有标签都在那里，并且 html 格式正确。

控制器事件：

[HttpPost] 公共 PartialViewResult 策略行（） { return PartialView("CostViewModel", new AcquisitionCostViewModel()); }

局部视图：

@using (Html.BeginCollectionItem("costrow")) {
<tr>
    <td>@Html.TextBoxFor(model => model.Description, new { maxlength = "50", @class = "form-control text-left" })</td>
    <td>@Html.TextBoxFor(model => model.Quantity, new { maxlength = "15", @class = "form-control text-center auto", @placeholder = "0", @data_v_max = "9999999999999", @data_v_min = "0" })</td>
    <td>@Html.TextBoxFor(model => model.Rate, new { maxlength = "15", @class = "form-control text-right auto", @placeholder = "0" })</td>
    <td>@Html.TextBoxFor(model => model.Amount, new { maxlength = "15", @class = "form-control text-right auto", @placeholder = "0" })</td>
    <td class="text-center"><button class="btn icon-only" type="button"><i class="fa fa-trash-o"></i></button></td>
</tr>
}

我已经多次查看代码，但我可以找到 <tr> and <td> 被 .append() 函数删除的原因。

谢谢队长0。

将我的部分视图更改为：

<tr>
   @using (Html.BeginCollectionItem("costrow")) {
    <td>@Html.TextBoxFor(model => model.Description, new { maxlength = "50", @class = "form-control text-left" })</td>
    <td>@Html.TextBoxFor(model => model.Quantity, new { maxlength = "15", @class = "form-control text-center auto", @placeholder = "0", @data_v_max = "9999999999999", @data_v_min = "0" })</td>
    <td>@Html.TextBoxFor(model => model.Rate, new { maxlength = "15", @class = "form-control text-right auto", @placeholder = "0" })</td>
    <td>@Html.TextBoxFor(model => model.Amount, new { maxlength = "15", @class = "form-control text-right auto", @placeholder = "0" })</td>
    <td class="text-center"><button class="btn icon-only" type="button"><i class="fa fa-trash-o"></i></button></td>

 }
</tr>

解决了这个问题。现在输入标签现在位于<tr> 标签内。

【问题讨论】：

• 去掉了什么，标签？
• 是的， 和 标签
• 警报响应时返回的？
• 是的，它们被退回
• <input> 是 <tbody> 的无效子元素。