javascript - 带有 html 输入控件的动态生成的表行在回发时消失

Question

我使用 jquery 动态生成了一个带有 html 输入控件的表行。

问题是当有回发时它们就会消失。

如何让他们留下来？

HTML:

   @Html.HiddenFor(x => x.Attribute_Count)
                        <table id="attribute" class="list">
                            <thead>
                                <tr>
                                    <td class="left">Name</td>
                                    <td class="right">Sort Order</td>
                                    <td></td>
                                </tr>
                            </thead>

                            <tbody id="attribute-row">
                                <tr>
                                    <td class="left">

                                        @Html.TextBoxFor(x => x.AttributeName)
                                        <div class="validation-area">
                                            @Html.ValidationMessageFor(x => x.AttributeName)
                                        </div>
                                    </td>
                                    <td class="right">@Html.TextBoxFor(x => x.Attribute_SortOrder)</td>
                                    <td class="left"></td>
                                </tr>
                            </tbody>


                            <tfoot>
                                <tr>
                                    <td colspan="2"></td>
                                    <td class="left"><a onclick="addattribute();" class="button">+</a></td>
                                </tr>
                            </tfoot>
                        </table>

JQuery:

var attribute_row = 1; function addattribute(){html = '<tbody id="attribute-row' + attribute_row + '">';html += '  <tr>';html += '    <td class="left">@Html.TextBoxFor(x=>x.AttributeName)<div class="validation-area">@Html.ValidationMessageFor(x => x.AttributeName)</div></td>';html += '    <td class="right"><input type="text" name="Attribute_SortOrder" id="Attribute_SortOrder"></td>';html += '    <td class="left"><a onclick="$(\'#attribute-row' + attribute_row + '\').remove();" class="button">-</a></td>';html += '  </tr>';html += '</tbody>';$('#attribute tfoot').before(html);attribute_row++;$('#Attribute_Count').val(attribute_row);}

Answer 1

我解决了这个问题。

@for (var i = 0; i < Model.Attribute_Count; ++i)
                        {
                            <tbody id="attribute-row">
                                <tr>
                                    <td class="left">

                                        @Html.TextBoxFor(x => x.AttributeName[i])
                                        <div class="validation-area">
                                            @Html.ValidationMessageFor(x => x.AttributeName[i])
                                        </div>
                                    </td>
                                    <td class="right">@Html.TextBoxFor(x => x.Attribute_SortOrder[i])</td>
                                    <td class="left"><a onclick="$('#attribute-row' + i).remove();" class="button">-</a></td>
                                </tr>
                            </tbody>
}

谢谢