Row & column alignment when dynamically adding rows to a html table using BeginCollectionItem in ASP.NET MVC 3 using jQuery -

i have following html table definition in main view

<table id="mydynamictable" cellpadding="0" cellspacing="0" class="burtable" width="964px">         <thead>             <tr>                 <th style="white-space: nowrap;display: inline;width: 40px" >                     colone                 </th>                 <th style="white-space: nowrap;display: inline;width: 90px">                     coltow                 </th>                 <th style="white-space: nowrap;display: inline;width: 54px">                     colthree                 </th>                 <th style="white-space: nowrap;display: inline;width: 60px">                     colfour                 </th>                 <th style="white-space: nowrap;display: inline;width: 399px">                     colfive                 </th>                 <th style="white-space: nowrap;display: inline;width: 474px">                     colsix                 </th>             </tr>         </thead>         <tbody>           @if (model.myviewmodel.count() > 0)             {                 int = 1;                 foreach (var item in model.myviewmodel)                 {                     <tr >                         <td class="tdborder">                             @html.displayfor(x => item.autonumber, new { @readonly = "readonly" })                             @html.hiddenfor(x => item.code, new { id = "code" + @i })                         </td>                         <td>                             @html.textboxfor(x => item.serialnumber, new { id = "serialnumber" + @i, @class = "numberonly", maxlength = 15 })                         </td>                         <td>                             @html.dropdownlist("ddlitemtype" + @i, new selectlist(viewbag.ddlitemtypelist system.collections.ienumerable, "value", "text", item.itemtypeid))                         </td>                         <td>                             @html.textboxfor(x => item.date, new { id = "date" + @i })                         </td>                         <td>                             @html.dropdownlist("ddlunit" + @i, new selectlist(viewbag.unitlist system.collections.ienumerable, "value", "text", item.unitid))                         </td>                         <td>                             @html.textboxfor(x => item.comment, new { id = "comment" + @i, @class = "comment restrictcharacters", maxlength = 1000 })                         </td>                     </tr>                     += 1;                 }              }             else             {                 <tr id="firstrow" class="tdborder">                     <td class="tdborder">                        @html.textbox("autonumber", null, new { @width = 60, id = "autonumber" })                     </td>                     <td>                         @html.textbox("serialnumber", null, new { @width = 150, id = "serialnumber" })                     </td>                     <td>                          @html.dropdownlist("ddlitemtype", new selectlist(viewbag.ddlitemtypelist system.collections.ienumerable, "value", "text"), new { @width = 60, id = "ddlitemtype" })                     </td>                     <td>                         @html.textbox("date", null, new { @width = 60, id = "date" })                     </td>                     <td>                         @html.dropdownlist("ddlunit", new selectlist(viewbag.unitlist system.collections.ienumerable, "value", "text"), new { @width = "auto", id = "ddlunit" })                     </td>                     <td>                         @html.textbox("comment", null, new { @width = 700, id = "comment" })                     </td>                 </tr>             }         </tbody>     </table> 

i want able add new rows using begincollectionitem concept explained in here http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ , add row in table jquery whic connected model in mvc

below definition of partial view want use template add new rows. @using myproject.utilities @model myproject.viewmodel.reportdetailsviewmodel

@using (html.begincollectionitem("newrow")) {     <tr id="newrow" class="tdborder">         <td class="tdborder">             @html.textbox("autonumber", null, new { @width = 60, id = "autonumber" })         </td>         <td>             @html.textbox("serialnumber", null, new { @width = 150, id = "serialnumber" })         </td>         <td>             @html.dropdownlistfor(model => model.itemtypeid, model.itemtypelist, new { @id = "ddlitemtype" })         </td>         <td>             @html.textbox("date", null, new { @width = 60, id = "date" })         </td>         <td>             @html.dropdownlist("ddlunit", new selectlist(viewbag.unitlist system.collections.ienumerable, "value", "text"), new { @width = "auto", id = "ddlunit" })             @html.dropdownlistfor(model => model.unitid, model.unitlist)         </td>         <td>             @html.textbox("comment", null, new { @width = 700, id = "comment" })         </td>     </tr> } 

in main view, i'm trying add new rows below

 var tablebody = $('#mydynamictable tbody');     var url = '@url.action("add", "report")';     $('#btnaddrow').click(function () {         $.get(url, function (response) {             tablebody.append(response);         });     }); 

the problem is, appears rows being added after table body not inside body after last row.

the other issue i'm having new row columns not aligning existing first row not picking style sheets applied controls in existing first row.

below screenshot of i'm far getting , i'm struggling alight these new rows existing first row.

var tablebody = $('#mydynamictable tbody');         var url = '@url.action("add", "report")';         $('#btnaddrow').click(function () {             $.get(url, function (response) {     $('#mydynamictable tbody <tr />').html(response).appendto(tablebody);                       });          }); 

change jquery code above. remove tr wrapper partial view

@using myproject.utilities  @model myproject.viewmodel.reportdetailsviewmodel  @using (html.begincollectionitem("newrow")) {          <td class="tdborder">             @html.textbox("autonumber", null, new { @width = 60, id = "autonumber" })         </td>         <td>             @html.textbox("serialnumber", null, new { @width = 150, id = "serialnumber" })         </td>         <td>             @html.dropdownlistfor(model => model.itemtypeid, model.itemtypelist, new { @id = "ddlitemtype" })         </td>         <td>             @html.textbox("date", null, new { @width = 60, id = "date" })         </td>         <td>             @html.dropdownlist("ddlunit", new selectlist(viewbag.unitlist system.collections.ienumerable, "value", "text"), new { @width = "auto", id = "ddlunit" })             @html.dropdownlistfor(model => model.unitid, model.unitlist)         </td>         <td>             @html.textbox("comment", null, new { @width = 700, id = "comment" })         </td>  }