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!
Comments
Post a Comment