c# MVC动态添加行到HTML表，但所有字段在一个单元格

我是c# MVC新手，需要一些帮助。我正在使用Matt Lunn的示例(http://www.mattlunn.me.uk/blog/2014/08/how-to-dynamically-via-ajax-add-new-items-to-a-bound-list-model-in-asp-mvc-net/)向HTML表中的绑定列表动态添加新项目。但是新项目没有被添加到每个<td>它们都被添加到第一列<td>中但是我将它们分散在相应的列中:

2017财年 ACCOUNT ELEMENT
345789职位
总监职位名称
营销总监

这是第一个单元格的结果:

新建fybox

新建帐户元素框

新建位置框

新职位名称框

但是想要这个:

第1单元格新增FY框|第2单元格新增Account Element框|第3单元格新增Position框|第4单元格新增Job Title框

这是我的观点:

<i>
<table>
        <tr>
            <th style="width:60px">FY</th>
            <th style="width:230px">ACCOUNT ELEMENT</th>
            <th align="center" style="width:50px">POSITION # <br />(IF APPLICABLE)</th>
            <th style="width:230px">JOB TITLE</th>
            <th style="width:250px">DEPT NAME</th>
            <th style="width:230px">JUSTIFICATION FOR PT HOURS</th>
            <th style="width:100px">HOURS <br />FOR YEAR</th>
            <th style="width:200px">RATE</th>
            <th style="width:200px">TOTAL <br />BUDGET</th>
        </tr>
        <tr id="pt-list">
            @Html.EditorForMany(x => x.ptList, x => x.Index)
        </tr>
        <tr>
            <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            <td align="right">@String.Format("{0,14:c}", Model.ptList[0].total_total_budget)</td>
        </tr>
    </table>
        <input type="button" id="add-pt" value="Add Part-Time" />
</i>

脚本:

<i>
<script>
        jQuery(document).ready(function ($) {
            $('#add-pt').on('click', function () {
                jQuery.get('/PCN/AddPT').done(function (html) {
                    $('#pt-list').append(html);
                });
            });
        });
    </script>
</i>

EditorTemplate:

<i>
@model Budget.Models.PCN.PCN_PT
<tr>
    <td>
        @Html.TextBoxFor(x => x.fy, new { @class = "form-controlsmaller" })
        @Html.ValidationMessageFor(x => x.fy)
    </td>
    <td>
        @Html.TextBoxFor(x => x.account_no, new { @class = "form-control" })
        @Html.ValidationMessageFor(x => x.account_no)
    </td>
    <td>
        @Html.TextBoxFor(x => x.position, new { @class = "form-controlsmaller" })
        @Html.ValidationMessageFor(x => x.position)
    </td>
    <td>
        @Html.TextBoxFor(x => x.job_title, new { @class = "form-control" })
        @Html.ValidationMessageFor(x => x.job_title)
    </td>
    <td>
        @Html.TextBoxFor(x => x.dept_name, new { @class = "form-control" })
        @Html.ValidationMessageFor(x => x.dept_name)
    </td>
    <td>
        @Html.TextBoxFor(x => x.justification, new { @class = "form-control" })
        @Html.ValidationMessageFor(x => x.justification)
    </td>
    <td>
        @Html.TextBoxFor(x => x.hrs_for_yr, "{0:0.00} ", new { @class = "form-controlsmaller" })
        @Html.ValidationMessageFor(x => x.hrs_for_yr)
    </td>
    <td>
        $@Html.TextBoxFor(x => x.rate, "{0:0.00} ", new { @class = "form-controlsmall" })
        @Html.ValidationMessageFor(x => x.rate)
    </td>
    <td>
        $@Html.TextBoxFor(x => x.total_budget, "{0:0.00} ", new { @class = "form-controltb" })
        @Html.ValidationMessageFor(x => x.total_budget)
    </td>
</tr>
</i>

PCN控制器添加新行:

<i>
        [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
        public ActionResult AddPT()
        {
            var pt = new PCN();
            pt.ptList.Add(new PCN.PCN_PT());
            return View(pt);
        }
</i>

当我单击Add Part-Time按钮时，如何使输入字段显示在表的相应列中?

    <i>
<script>
        jQuery(document).ready(function ($) {
            $('#add-pt').on('click', function () {
                jQuery.get('/PCN/AddPT').done(function (html) {
                    $('#pt-list').append(html);
                });
            });
        });
    </script>
</i>

<tr id="pt-list">
@Html.EditorForMany(x => x.ptList, x => x.Index)
</tr>