c# MVC Dynamically adding row to HTML Table but all fields in 1 cell

Question

I am new to c# MVC and need some help. I am using Matt Lunn's example ( 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/ ) to dynamically add new items to a bound list in an HTML table. But instead of the new items getting added to each <td> they are all added in the first column <td> but I was them spread out in corresponding columns:

FY
2017 ACCOUNT ELEMENT
345789 POSITION
Director JOB TITLE
Director of Marketing

This is result all in first cell:

New FY box

New AccountElement box

New Position box

New Job Title box

But want this:

New FY Box in 1st cell | New Account Element box in 2nd cell | New Position box in 3rd cell | New Job Title Box in 4th cell

Here is my view:

<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>

Script:

<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 Controller to add New Row:

<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>

How can I get the input fields displayed in the corresponding column of the table when I click Add Part-Time button? Any help would be greatly appreciated.

Answer 1

Take a close look what you are appending your information to.

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

and your html is:

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

So you are appending the html to a TR element when you want to append something to the table.

use .after() and insert a new tr and tds for your values.

And why is there a <i> in your template? Remove that! A row in a table cannot be italic!

Take a close look at how a table in html should look!

http://www.w3schools.com/html/html_tables.asp