title: How to dynamically add rows to an html table using MVC razor syntax
body: <p>I'm trying to dynamically add new rows to a table using the idea marked as answer here <a href="https://stackoverflow.com/questions/171027/add-table-row-in-jquery?rq=1">Add table row in jQuery</a> </p>
  
  <p>I have so far implemented it for one of my table requirements like below</p>
  
  <pre><code>    function onAddItem() {
      $('#myDynamicTable tr:last').after('&lt;tr&gt;&lt;td style="width: 78%;" class="itemName"&gt;&lt;input type="text" style="width: 97%;" /&gt;&lt;/td&gt;&lt;td style="width: 20%;" class="itemQty"&gt;&lt;input type="text" style="width: 87%;" /&gt;&lt;/td&gt;&lt;/tr&gt;');
      $("#myDynamicTable").show();
  }
  </code></pre>
  
  <p>I'm now trying to implement the same for the <code>&lt;tr&gt;..&lt;/tr&gt;</code> definition below but i'm failing to get it working. </p>
  
  <pre><code>&lt;tr class="tdBorder"&gt;
                      &lt;td class="tdBorder"&gt;
                          @Html.TextBox("Id", null, new { @width = 60 })
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.TextBox("Name", null, new { @width = 150 })
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.DropDownList("ddlCountries", new SelectList(ViewBag.CountryList as System.Collections.IEnumerable, "Value", "Text"), new { @width = 60 })
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.TextBox("Event", null, new { @width = 60 })
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.DropDownList("ddlRegions", new SelectList(ViewBag.RegionList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto" })
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.TextBox("Remarks", null, new { @width = 700 })
                      &lt;/td&gt;
                  &lt;/tr&gt;
  </code></pre>
  
  <p>I thought i would try the line below but that crushes jQuery.</p>
  
  <pre><code>$('#myDynamicTable tr:last').after('&lt;tr class="tdBorder"&gt;&lt;td class="tdBorder"&gt;@Html.TextBox("Id", null, new { @width = 60 })&lt;/td&gt;&lt;td&gt;@Html.TextBox("Name", null, new { @width = 150 })&lt;/td&gt;&lt;td&gt;@Html.DropDownList("ddlCountries", new SelectList(ViewBag.CountryList as System.Collections.IEnumerable, "Value", "Text"), new { @width = 60 })&lt;/td&gt;&lt;td&gt;@Html.TextBox("Event", null, new { @width = 60 })&lt;/td&gt;&lt;td&gt;@Html.DropDownList("ddlRegions", new SelectList(ViewBag.RegionList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto" })&lt;/td&gt;&lt;td&gt;@Html.TextBox("Remarks", null, new { @width = 700 })&lt;/td&gt;&lt;/tr&gt;');
  </code></pre>