title: Dynamically Changing Table Data
body: <p>I have an MVC Razor application and I'm trying to change a table's data based on a selectlist change.I found <a href="https://stackoverflow.com/questions/2943825/jquery-set-tbody">this</a> article but the table data just gets deleted, nothing gets added (the table ends up empty). Any idea what I am doing wrong?</p>
  
  <p>Razor</p>
  
  <pre><code>&lt;div class="editor-field"&gt;
      &lt;select class="filterby dropdown" id="OrderTypes"&gt;
          &lt;option selected&gt;Sales Orders&lt;/option&gt;
          &lt;option&gt;Sample Orders&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;table  id="OrderTable"&gt;
   &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;@Html.DisplayNameFor(model =&gt; model[0].order_id)&lt;/th&gt;
          &lt;th&gt;@Html.DisplayNameFor(model =&gt; model[0].order_number)&lt;/th&gt;
          &lt;th&gt;@Html.DisplayNameFor(model =&gt; model[0].Sell_to_Customer_No)&lt;/th&gt;
          &lt;th&gt;@Html.DisplayNameFor(model =&gt; model[0].Ship_to_Code)&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      @foreach (var item in Model) {
          &lt;tr&gt;
              &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.order_id)&lt;/td&gt;
              &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.order_number)&lt;/td&gt;
              &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.Sell_to_Customer_No)&lt;/td&gt;
              &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.Ship_to_Code)&lt;/td&gt;
              &lt;td&gt;@Html.ActionLink("Edit", "orderEdit", new { id = item.order_id }) &lt;/td&gt;
          &lt;/tr&gt;
      }
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>Controller Ajax function</p>
  
  <pre><code> public ActionResult ChangeOrders(string ordertype)
   {
      List&lt;SalesOrderModel&gt; orders = _repository.getOrders(ordertype);
  
      return Json(orders);
   }
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>$('#OrderTypes').on('change', function () {
      //gets the orders (sales or samples)
      $.post(url, { ordertype: $ordertype.val() }, function (results) {
          $('#OrderTable').children('tbody').html(results);
      });
  });
  </code></pre>
  
  <p>I added the code below to my JQuery and confirmed the results are being returned successfully</p>
  
  <pre><code>$.each(results, function (k,v) {
      alert(v.order_number);
  });
  </code></pre>