title: Display table header only when tbody has atleast one row
body: <p>I have coded to display table body without headers for a click event. Now I am getting the table headers as soon as the page loads and this should not happen. I need to display the table headers only when the the form is submitted and if there is an element in the body. </p>
  
  <p>Javascript is as follows:</p>
  
  <pre><code>var getNameOfEmployee = document.getElementById('getNameOfEmployeeID');
    function displayEmployee(){
  
          if (getNameOfEmployee.value != "") {
               $("#searchForm").submit(function (event) {
               event.preventDefault();
               });
  
               AjaxGet();
          }
          else{
              alert("Please enter any name of employee that you wish to know the extension code of!");
          }
    }
  
    AjaxGet = function (url, storageLocation, mySuccessCallback) {
  
          var result = $.ajax({
              type: "GET",
              url: 'http://localhost:8080/emp/' +$("#getNameOfEmployeeID").val(),
              param: '{}',
              contentType: "application/json",
              dataType: "json",
              success: function (data) {
  
                  storageLocation = data;
  
  
                  var txt = "";
  
                  var length = Object.keys(storageLocation).length;
                  $.each(storageLocation, function (index, value) {
  
                      $("#searchForm #someLabel" + index).val(value.name);
                      txt += "&lt;tr&gt;&lt;td&gt;"+value.name+"&lt;/td&gt;&lt;td&gt;"+value.course+"&lt;/td&gt;&lt;td&gt;"+value.department+"&lt;/td&gt;&lt;/tr&gt;";
                  });
  
                   if(txt != ""){
  
                       $("#searchTableID tbody").html(txt);
                   }
              }
          }).responseText ;
    };
  </code></pre>
  
  <p>My HTML code for the click event is</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns:margin-right="http://www.w3.org/1999/xhtml" xmlns:padding-bottom="http://www.w3.org/1999/xhtml"
        xmlns:width="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;body&gt;
  
      &lt;!--search bar--&gt;
      &lt;div class="wrap" &gt;
          &lt;form id="searchForm" &gt;
              &lt;div &gt;
              &lt;input type="text" id='getNameOfEmployeeID' class="searchTerm" placeholder="Employee Name" name = "employeeNamePassToURL"&gt;
                  &lt;button type="submit" onclick='displayEmployee()' class="searchButton" id="submitid"&gt;
                      &lt;i class="fa fa-search"&gt;&lt;/i&gt;
                  &lt;/button&gt;&lt;/div&gt;
  
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;!--table for search results--&gt;
      &lt;div class = "container" &gt;
          &lt;table  id = "searchTableID"
                  class= "table-responsive container table table-hover table-bordered table-striped"
                  style="float:left; width:40%; margin-left: 1%; margin-top:10%"&gt;
              &lt;thead style = "background-color: #800080; color: white;"&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;&lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;script src = "js/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script src ="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src = "js/main.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>