title: How to update an HTML table through AJAX call?
body: <p>Guys I have a html table in my ASP.net MVC <code>home</code> view. Now the table is being filled initially through the data present in model. Now upon clicking certain buttons on the homepage, I want to update the data present in the table i.e. clear the data present in the table and update it with the one from ajax call.</p>
  
  <p>This is my table from view :</p>
  
  <pre><code>&lt;article class="scrlable"&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;#&lt;/td&gt;
          &lt;td&gt;Name&lt;/td&gt;
          &lt;td&gt;Status&lt;/td&gt;
          &lt;td&gt;Since&lt;/td&gt;
      &lt;/tr&gt;
  
      @{   
      int srno = 1;
      foreach (var pendingResponseModel in Model.hrPendingResponseList)
      {
      &lt;tr&gt;
          &lt;td&gt;@srno&lt;/td&gt;
          &lt;td&gt;@pendingResponseModel.CandidateName&lt;/td&gt;
           &lt;td&gt;@pendingResponseModel.CandidateLifeCycleStatusName&lt;/td&gt;
            @if (pendingResponseModel.DayDifference == "1")
                  {
            &lt;td&gt;@(pendingResponseModel.DayDifference) day&lt;/td&gt;
                      }
                      else
                      {
                          &lt;td&gt;@(pendingResponseModel.DayDifference) days&lt;/td&gt;
                      }
                  &lt;/tr&gt;
                      srno++;
                  }
              }
          &lt;/table&gt;
      &lt;/article&gt;
  </code></pre>
  
  <p>And this is my ajax call :</p>
  
  <pre><code>function GetStatusWise(control, departCode) {
      $.ajax(
          {
              type: "GET",
              url: "...URL..." + departCode,
              dataType: "json",
              crossDomain: true,
              async: true,
              cache: false,
              success: function (data) {
                  $.each(data.data, function (index, value) {
                   // UPDATE TABLE HERE...
                  });
              },
              error: function (x, e) {
                  alert('There seems to be some problem while fetching records!');
              }
  
          }
      );
  }
  </code></pre>
  
  <p>The data returned from ajax call is in JSON. It has Name, Status and Since elements. They can be viewed by using <code>value.CandidateName</code>, <code>value.Status</code> etc</p>
  
  <p>Now I want to update the values of above table with the values I am getting through AJAX call. How would I go about doing that? Is it possible to replace the whole article ?</p>
  
  <p>Note : I am getting multiple values through ajax call so that is why I put a loop on the function.</p>