title: How to refresh a table with jquery
body: <p>I search about my question online and found this closest to my query. 
  <a href="https://stackoverflow.com/questions/11448791/how-to-refresh-a-div">How to refresh a div?</a></p>
  
  <p>But I am still unable to find the solution of my query. My query is I have below code</p>
  
  <pre><code>    &lt;h1&gt;Time&lt;/h1&gt; 
      &lt;input type="text" value="0.0" id="time"&gt;
      &lt;button id="FormSubmit"&gt;Submit&lt;/button&gt;
      &lt;img src="loading.gif" id="LoadingImage" style="display:none" /&gt;
      &lt;table id="responds" &gt;
          &lt;tr&gt;
              &lt;th&gt;Time&lt;/th&gt;
          &lt;/tr&gt;
          &lt;?php
              $results = $mysqli-&gt;query("SELECT * FROM time ORDER BY time");
              //get all records from add_delete_record table
              while($array = $results-&gt;fetch_assoc()) {
          ?&gt;
              &lt;tr id="item_&lt;?php echo $array["id"] ?&gt;"&gt;
                      &lt;td&gt;&lt;?php echo $array['time']?&gt;
                      &lt;a href="#" class="del_button" id="del-&lt;?php echo $array["id"] ?&gt;"&gt;
                          &lt;img src="icon_del.gif" /&gt;
                      &lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;?php }
          ?&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>and I want to reload this table again after every 30 seconds. I am pretty naive in using jquery and also I don't have any script file to get data from server. I don't want to put database code in other files due to some other reasons. How can I do this?</p>
  
  <p>Below is some code that is related with table.</p>
  
  <pre><code>    $("#FormSubmit").click(function (e) {
                  e.preventDefault();
                  if($("#time").val()==='') {
                      alert("Please enter some text!");
                      return false;
                  }   
                  $("#FormSubmit").hide(); 
                  $("#LoadingImage").show(); 
  
                  var myData = 'content_txt='+ $("#time").val(); 
                  jQuery.ajax({ 
                      type: "POST", 
                      url: "time.php", 
                      dataType:"text", 
                      data:myData, 
                      success:function(response){
                          $("#responds").append(response);
                          $("#contentText").val(''); 
                          $("#FormSubmit").show(); 
                          $("#LoadingImage").hide(); 
  
                      },
                      error:function (xhr, ajaxOptions, thrownError){
                          $("#FormSubmit").show(); 
                          $("#LoadingImage").hide(); 
                          alert(thrownError);
                      }
                  });
              });
  
              $("body").on("click", "#responds .del_button", function(e) {
                  e.preventDefault();
                  var clickedID = this.id.split('-'); 
                  var DbNumberID = clickedID[1]; 
                  var myData = 'recordToDelete='+ DbNumberID; 
  
                  $('#item_'+DbNumberID).addClass( "sel" ); 
                  $(this).hide(); 
  
                  jQuery.ajax({
          type: "POST",
          url: "time.php", 
          dataType:"text", 
          data:myData, 
          success:function(response){ 
                          $('#item_'+DbNumberID).fadeOut();
          },
          error:function (xhr, ajaxOptions, thrownError){ 
                          alert(thrownError);
          }
                  });
              });
  </code></pre>