Javascript 如何在MVC4中使用Razor视图创建表中的动态行？

我在razor视图中有一个表，该表包含一些Html控件，如下所示：-

  <table style="text-align: center; width: 680px; background-color: White;" rules="all" id="tableId">
                <tr>
                    <td style="width: 20px;"></td>
                    <td>
                        <label>
                            Campaign Name</label>
                    </td>
                    <td>
                        <label>
                            Valid Date From</label>
                    </td>
                    <td>
                        <label>
                            Valid Date To</label>
                    </td>
                    <td>
                        <label>
                            Is Active</label>
                    </td>
                    <td>
                        <label>
                            ContractPDF</label>
                    </td>
                    <td>
                        <label>
                            Browse Contract</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.HiddenFor(m => m.Customer_ID)
                    </td>
                    <td class="trBorder">
                        @Html.TextBoxFor(m => m.Customer_Name)
                    </td>
                    <td class="trBorder">
                        @Html.TextBoxFor(m => m.ValidFrom, new { @class = "datepicker" })
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.ValidTo, new { @class = "datepicker" })
                    </td>
                    <td>
                        @Html.CheckBox("gridChkCampaignIsActive", m => m.IsActive)
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.ContractDocumentPath)
                    </td>
                    <td>
                        @Html.ActionLink("Browse", "FileUpload")
                    </td>
                </tr>
            </table>

活动名称
有效日期自
有效日期至
是活跃的
合同PDF
浏览合同
@Html.HiddenFor（m=>m.Customer\u ID）
@Html.TextBoxFor（m=>m.Customer\u Name）
@TextBoxFor（m=>m.ValidFrom，new{@class=“datepicker”}）
@TextBoxFor（m=>m.ValidTo，new{@class=“datepicker”}）
@复选框（“gridChkCampaignIsActive”，m=>m.IsActive）
@Html.TextBoxFor（m=>m.ContractDocumentPath）
@ActionLink（“浏览”、“文件上传”）

添加客户按钮

我的问题是，我希望此表像网格控件一样，当我单击“添加客户”按钮时，网格控件中将添加一个空行

请帮帮我

---

任何帮助都将不胜感激

它太简单了，为每个元素分配一个id，然后在访问值中填充一个表

像

@Html.TextForFor（m=>m.name，新的{@class=“form control”，id=“name”}）
//然后通过javascript动态填充表
//假设您已将id分配给文本框，如a、b、c和等等。。
$。（#btnAddCustomer）。单击（函数（）{
var pc=$（“#pcode”）.val（）；
var p=$（“#a”）.val（）；
var q=$（“#b”）.val（）；
变量e=$（“#c”）.val（）；
var行=“”；
行+=“”
行+=“”+p+“”
行+=“”+q+“”
行+=“”+r+“”
行+=“”；
$（“#tbl tbody”）。追加（行）；
})

@Html.TextForFor(m=>m.name, new {@class="form-control", id="name"})
    //then dynamically table to be populated via javascript
     <table id="tbl">
    <thead></thead>
    <tbody></thead>
    </table>
    <input type="button" value="Add Customer" name="btnAddCustomer" id="btnAddCustomer" style="margin-left: 20px;"/>
    //assume that u have assign id to text boxes like a, b, c, and ,so on..
    <script>
    $.(#btnAddCustomer).click(function () {
     var pc = $("#pcode").val();
            var p = $("#a").val();
            var q = $("#b").val();
            var e = $("#c").val();
            var rows = '';
            rows += "<tr>"
            rows += "<td>" + p + "</td>"
            rows += "<td>" + q + "</td>"
            rows += "<td>" + r + "</td>"       
            rows += "</tr>";
            $("#tbl tbody").append(rows);

    })
    </script>