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

i new c# mvc , need help. 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/) dynamically add new items bound list in html table. instead of new items getting added each <td> added in first column <td> them spread out in corresponding columns:

fy
2017account element
345789position
directorjob title
director of marketing

this result 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 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 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 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 input fields displayed in corresponding column of table when click add part-time button? appreciated.

take close appending 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 html is:

<tr id="pt-list"> @html.editorformany(x => x.ptlist, x => x.index) </tr> 

so appending html tr element when want append table.

use .after() , insert new tr , tds values.

and why there <i> in template? remove that! row in table cannot italic!

take close @ how table in html should look!

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